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Deep Cyberspace, Estate 2018 

Tutti i testi di RESTYLING DI SITI WEB sono originali e scritti da Enrico 
Bisenzi sotto licenza 

Attribution-NonCommercial-NoDerivatives 4.0 International 




Introduzione 

Alzarsi prima dell'alba, guidare l'auto fino alla stazione di Firenze Rifredi, 
prendere un treno insieme ad un umanità sempre più bizzarra ed agitata, 
scendere a Carrara Avenza e correre per prendere la coincidenza con l'autobus, 
fermarsi alla pasticceria Caflish in 'Carara' (le doppie non si pronunciano...) dove 
gustarsi il buongiorno della Signora - 'Buongiorno Professore!' - e, la solita tutti 
i venerdì da tredici anni, fantastica sfoglia di riso. Così è per me il saluto a 
Carrara, appunto da tredici anni, e se questo inizio vi può sembrare lungo e 
faticoso è solo un primo momento fugace che accende la mia giornata didattica 
circondato da affettuose bidelle, colleghi con i quali c'è sempre meno tempo per 
coordinarsi e soprattutto gli studenti di Carara... provenienti da mezzo mondo 
sono accomunati, per ora, da uno spirito ribelle (forse risentono delle origini 
anarchiche di questa terra...) ma non irrispettoso e da una discreta fantasia, 
curiosità e voglia di imparare: delle basi che spesso danno buonissimi risultati a 
cominciare dalle tesi di laurea che, indubbiamente, sono fra le più interessanti e 
curate di tutta l'Accademia di Carrara (da non confondersi con l'omonima di 
Bergamo, qui siamo in Toscana anche se, toscani, i Cararini non si sentono 
proprio...). Il rapporto con gli studenti, peraltro, diventa ogni semestre più 
complesso a causa delle armi di distrazione di massa (smartphone e social) che 
rendono i discenti del corso in alcuni casi disattenti e de-concentrati. È per 
questo motivo che ho deciso di realizzare un un breve iper-testo che sia 
riferimento didattico utile soprattutto per evitare incomprensioni su quali 
principi e know-how porre maggiore attenzione ed al tempo stesso - grazie 
proprio alla sua natura di ipertesto - possa offrire possibilità di approfondimento 
in autonomia. 

Il testo può essere liberamente reperibile e condivisibile dai repository di 
Archive.org e si può leggere nella sua formato in PDF su carta o su qualsiasi 
computer-software capace di interpretare il diffusissimo Portable Document 
Format oppure in formato ePub su qualsiasi lettore di ebook. Lo specifico 
formato multimediale epub3 permette su alcuni software multi-piattaforma come 
Readium oppure Gitden di usufruire anche dei contributi audio e video inclusi 
mentre per i link di approfondimento è necessario usufruire della connessione ad 
Internet. 

Tutte le risorse indicate in questo ipertesto possono essere monitorate nelle loro 
versioni aggiornate sul sito Web http://www.infoaccessibile.com dove è possibile 
trovare anche altri riferimenti e strumenti per approfondire le tematiche 
affrontate (questo testo è volutamente sintetico al solo scopo di sottolineare 



aspetti e procedure essenziali in materia) mentre sul blog 
https://scaccoalweb.wordpress.com è possibile seguire delle riflessioni in 
continuo aggiornamento sulle tematiche trattate. 

A volte nel testo viene utilizzata della terminologia tecnica e, soprattutto in caso 
di primo utilizzo, viene preceduta dal segno esclamativo ! ed evidenziata in 
grassetto: può essere interpretata in apposito glossario delle Iparole chiave 
Abracadabra in ossequio ad una mia teoria 

http://neural.it/it/2015/12/abracadabra-a-querv-is-not-a-query/ di utilizzo e 
valorizzazione di parole e concetti particolarmente strategici nella ! UX digitale. 
La scelta di privilegiare formati e linguaggi allo stesso tempo open-source e 
standard va incontro ad una mia personale convinzione - maturata grazie al 
confronto con attivisti del software libero e della libera condivisione della 
conoscenza - di offrire a chi ancora deve crescere e studiare strumenti versatili 
ma non particolarmente onerosi (quanto meno sotto il profilo economico) ed al 
tempo stesso di abituarsi a lavorare per produrre contenuti e manufatti (pur 
digitali) orientati ad una conservazione a lungo termine ed ad una loro libera 
condivisione. 




Restyling dei Siti Web 



Programmi pubblicati sul Web 

Il corso ha l'obiettivo di fornire ai discenti attraverso un percorso teorico-laboratoriale il know-how 
necessario per attuare procedure di restyling ad un sito web. Particolare attenzione viene posta al rispetto di 
principi di accessibilità ed usabilità per una corretta UX User eXperience da parte di visitatori umani in 
un'ottica cross-mediale così come il rispetto di principi di corretto (A)UX Artificial User eXperience Design 
al fine di esaltare la mediazione tecnologica di ausili, navigatori ed assistenti vocali, social network, motori 
di ricerca, bot e sistemi di intelligenza artificiale in evoluzione. Il corso ha l'obiettivo di investigare tutte le 
opportunità del restyling di siti Web che più possono valorizzare un progetto comunicativo cross-mediale. 

Programma proposto per anno accademico 

2018-2019 


f. Accessibilità del digitale: esigenze di utenti (disabili) e relativi ausili 

2. Accessibilità del digitale: linee guida per videogame accessibili 

3. Usabilità del digitale: per chi e per cosa ? 

4. Usabilità del digitale: strumenti di analytics e relativi problemi di privacy 

5. Contenuti per il digitale: parole chiave [Abracadabra e ISentiment online 

6. Contenuti per il digitale: tecniche di verifica dell'informazione online 

7. Web Communication: opportunità di analisi dei browser Web e dei motori di ricerca 

8. Web Communication: come attrezzarsi all'emergenza della conservazione dei beni digitali 

9. Cross Cultural Communication: come uscire dal IFilter Bubble dei Social Network 

10. Cross Cultural Communication: strumenti digitali ed opportunità di mediazione linguistica e culturale 

11. (A)UX (Artificial User eXperience) Design 1 - fondamenti dell'editing Web alla luce dei principi del 
Material Design di Google 

12. (A)UX (Artificial User eXperience) Design 2 - codice Web per motori di ricerca ed altre entità 
artificiali 

13. (A)UX (Artificial User eXperience) Design 3 - eBook design 

Informazioni 


• Docente Enrico Bisenzi 

• Scuola Nuove tecnologie dell'arte 

• Tipologia Diploma Accademico di primo livello (triennio) 

• Ore 75TL 

• Crediti Formativi 6 

• Settore ABPR19 




Preparazione al corso: strumenti utili e definizione di 
OBIETTIVO COMUNICATIVO E TARGET DI 
RIFERIMENTO 

Software o servizi online utili di 
riferimento 

Se la chiavetta USB che ho portato in classe non funziona oppure non avete a 
disposizione un device con connessione Universal Serial Bus allora scaricate da 
Internet ed installate i seguenti software ! Open Source che vi saranno utili 
per il proseguimento del corso... 

Gravit 

https://designer.io 

https://gravit.io 

Gravit è sia un servizio online che un software multi-piattaforma abbastanza 
intuitivo e potente per il design di interfacce digitali. 

Libre Office 

https://it.libreoffice.org 

Libre Office deriva da Open Office ed è un ottimo strumento per editare svariate 
tipologie di documenti in formato office (pdf compresi e tutto ciò che potete 
immaginare normalmente realizzato con Word-PowerPoint-Excel-eccetera). 
Risulta particolarmente utile in fase di scrittura contenuti testuali, per 
correggergli ortograficamente in maniera agevole e per strutturarli in maniera 
corretta al fine di esportarli in altri formati come ad esempio per il formato ePub 
grazie ad estensioni quali Writer2Html 
https://extensions.libreoffice.org/extensions/writer2xhtml 

Bluefish 

http://bluefish.openoffice.nl è un editor open-source multipiattaforma per 
linguaggi web old-school ma proprio per questo molto utile soprattutto per chi si 
approccia per la prima volta all'editing di html css o altri linguaggi utili per il 
Web. 


MockFlow 

https://www.mockflow.com Ambiente di sviluppo e prototipazione per app 








(necessità di flash). 

inVISION 

https://www.invisionapp.com 

Social Network per la condivisione a livello internazionale di prototipi di design 
digitale. 

AVVERTENZA PER L’ESERCITAZIONE 

Questa dell’installazione dei software e dell’iscrizione ai servizi online indicati è 
UNA ESERCITAZIONE e va affrontata con l’impegno che merita 
un’esercitazione, nello specifico bisogna porre attenzione a: 

• individuare l’estensione-formato file di competenza per il proprio sistema 
operativo; 

• obbligatoriamente leggere (readme) le istruzioni che eventualmente su 
qualche ! sistema operativo indicano procedure eventualmente 
complesse di installazione del software ivi compreso eventuali librerie- 
dipendenze (diciamo software aggiuntivo) eventualmente necessario per 
l’installazione; 

• installare eventuali pacchetti supplementari indicati in fase di installazione 
per poter usufruire di documentazione di supporto (help) oppure di 
interfacce scritte nella propria lingua-cultura di appartenenza; 

• nel caso di sottoscrizioni di servizi online fare attenzione ai requisiti di 
iscrizione (anche se gratuiti) ed in particolare alla regolamentazione 
inerente la gestione e conservazione dell’account attivato (compresa 
eventuale possibilità di eliminazione od esportazione dati prodotti in 
svariati formati) e soprattutto le regole inerenti input e condivisione dei 
materiali immessi nella piattaforma. 



Obiettivo comunicativo e target di 
riferimento 

Fermo restando la più completa libertà di scelta nell’individuare l’interfaccia da 
creare o migliorare (restyling) che potrebbe essere ad esempio: 

• interfaccia di propria inventiva da ri-progettare ex novo; 

• interfaccia attualmente esistente anche di proprietà di terze parti da 
analizzare sotto il profilo della corretta User eXperience in funzione di 

! debugger... 

è molto importante saper decidere o saper assegnare ad un’interfaccia digitale sia 
l’OBIETTIVO COMUNICATIVO così come il TARGET DI RIFERIMENTO 
più appropriati. 

Obiettivo comunicativo 

L’obiettivo comunicativo indica perché si realizza un’interfaccia (i perché e le 
domande fanno sempre bene a un progettista di qualsivoglia interfaccia) e le 
finalità di un’interfaccia sono uno degli aspetti che influenzano le linee guida di 
sviluppo progettuale del design digitale in tutti i suoi aspetti e per tutte le sue 
componenti, principali ma anche secondarie. Con la mia interfaccia devo 
narrare? Promuovere? Vendere? Istruire? E poi volendo entrare maggiormente 
nello specifico... Cosa? Come? Quando? 

Target di riferimento 

L’altro aspetto che necessariamente influenza le linee guida di sviluppo 
progettuale del design digitale in essere è l’individuazione del target di 
riferimento ovvero... per CHI stiamo sviluppando la nostra interfaccia digitale? 
Ovviamente tutto è relativo rispetto al differente target di riferimento individuato 
che potrebbe avere varianti significative come quelle inerenti l’età, il genere, il 
livello di istruzione, lingua e cultura di provenienza eccetera. 



Esempio 

Gli esempi come al solito valgono molto più di mille parole ed allora ecco a voi 
il fantastico video del The Tokyo Shimbun "Share thè Newspaper with 
Children... 


00 : 00 / 00:00 


Il problema dei quotidiani su carta di non saper intercettare le giovanissime 
generazioni viene affrontato da un quotidiano giapponese in maniera 
assolutamente creativa realizzando una serie di realtà aumentata (AR) che il 
giovane lettore giapponese può visualizzare inquadrando gli articoli del 
quotidiano che sono opportunamente supportati da una trascrizione semplificata 
adeguata per grammatica e linguaggio ad un bambimo: la scrittura semplificata 
hirigana unitamente a sintesi adeguate ed animazioni divertenti rendono la 
lettura di un quotidiano un’esperienza appagante anche per un lettore di nove o 
dieci anni. In questa maniera con un prodotto cartaceo traslato al digitale (con 
una strategia dunque cross-mediale ) si raggiunge l’obiettivo comunicativo di 
informare coinvolgendo più target di riferimento. 

















Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) il software 
installato e servizi a cui si è completata la propria iscrizione oppure alternative 
equivalenti già in proprio possesso, una descrizione sommaria dell’interfaccia 
digitale da creare ex-novo oppure da ri-modellare (restyling), l’obiettivo 
comunicativo e il target di riferimento. 



Nomi, parole e contenuti da utilizzare 

Un’interfaccia (digitale) affinché funzioni deve essere nominata in maniera 
efficace ma anche deve essere assemblata da componenti (come fossero dei 
mattoncini Lego...) validi e soprattutto legittimamente utilizzabili: cominciamo 
dal nome... 

Nome = Brand 

Quale nome dare alla nostra interfaccia? Sembra un aspetto secondario ed invece 
è una scelta strategica quella dell’assegnare un nome che ovviamente può e deve 
essere un brand ovvero un marchio (deriva dal marchiare a fuoco il bestiame 
che così poteva essere rivendicato come proprietà...) che a sua volta deve 
possedere alcune qualità anche quando traslato nella sua forma di Slogo ovvero 
deve essere... 

Originale 

Bisogna essere originali in termini assoluti o quanto meno rispetto al proprio 
settore di riferimento altrimenti si corre il rischio di non essere facilmente 
reperibili e contattabili tramite ! motori di ricercae social network 
subendo così la concorrenza di competitor già affermati e quindi già visibili. Per 
verificare l’originalità del nome che ci è venuto in mente è possibile usufmire 
dei seguenti servizi di ricerca online: 

https://knowem.com per verificare l'originalità dell’account social equivalente 
(anche se può non essere identico beninteso) al brand ipotizzato; 

https://www.godaddy.com/domains/domain-name-search come uno fra i tanti 
servizi di verifica dell'originalità del dominio Web equivalente (anche se può non 
essere identico beninteso) al brand ipotizzato; 

http://www.wipo.int/branddb/en/ per verificare l’assenza di tutele giuridiche 
rispetto al brand ipotizzato. 





Significativo 

Non è facile capire il valore culturale di un nome ipotizzato e ancor più a livello 
cross-cultural ma uno dei metodi più interessanti è quello di utilizzare il 
CANALE IMMAGINI di motori di ricerca come Google ma anche Bing, 
Yandex, Naver o Baidu per capire a quale immaginario può appartenere la scelta 
di un nome di brand ipotizzato. 


Comprensibile e facilmente comunicabile 


Un brand deve essere comprensibile e facilmente comunicabile in qualsiasi 
modo ed è per questo che è importante controllare anche la sua pronuncia 
fonetica magari attraverso la piattaforma di scambio social delle pronunce 
diffuse in tutto il mondo come https://it.forvo.com/pronounce/ 


OForvo 

All thè words in thè worid. Pronotinced. 


Aggiungi parole 


Pronuncia 


> Accedi + Iscriviti 


eLearning 


Lingue 

Guide 

Categorie 

Eventi 

Utenti 






Pronuncia 

1 

P 

I_ 


Pronuncia 


Scegli una lingua per vedere le pronunce in sospeso solo per quella lingua. 


Lingua: 


Scegli la lingua 


+ Aggiungi 
nuove parole 


O dare uno sguardo alle ultime 50 parole aggiunte per la pronuncia. Forse potresti aiutare a 
pronunciarle tu stesso. 


Parole 

o [yue) 

O Telegrafenstange [de] 
O *1(^3) [ja] 

O schismless [en] 


Frasi 

O ZU Felde [de] [Altro] 

O gehen um etwas [de] [Altro] 
O einen Bus kriegen [de] [Altra] 


» Pronunce in 
» Pronunce in 
» Pronunce in 
• Pronunce in 
» Pronunce in 
» Pronunce in 
» Pronunce in 
» Pronunce in 


Tedesco 

Tatarico 

Russo 

Inglese 

Giapponese 

Francese 

Spagnolo 

Portoghese 


Esprimere Identità 

Con i suoi font utilizzati e la sua carica comunicativa iconica deve poter 
trasmettere l’identità di ciò che deve rappresentare a pieno titolo ed in maniera 
efficace. 


Adattivo 

Deve potersi adattare - mantenendo la propria capacità comunicativa - ai diversi 
ambiti (anche dimensionali) in cui essere collocato in un’ottica di filiera 
pubblicitaria ! cross-mediale: in ambito digitale risulta sicuramente 
importante una sua corretta interpretazione all’interno di uno spazio assimilabile 
ad un piccolo quadrato o cerchio essendo spesso questi utilizzati in ambito social 










soprattutto a livello di gestione grafica dei loghi. 

Corredato di eventuale Payoff 

Associabile ad un brand è poi un payoff - ovvero uno slogan come si sarebbe 
detto una volta - che non è altro che una (breve) frase capace di esprimere il 
mood del brand con il quale l’utente deve poter essere invogliato a sintonizzarsi 
spontaneamente. 

Un esempio geniale del passato (anni ‘50-’60) quello della Vespa della Piaggio 
che con la frase CHI VESPA MANGIA LE MELE attirava la curiosità e 
l’attenzione del suo target di età di riferimento più importante - quello 
giovanilistico - legato ad istinti spontaneamente trasgressivi e. quindi, in quegli 
anni, ancora facilmente riconducibili simbolicamente al primo gesto trasgressivo 
dell’essere umano di tradizione culturale cristiana ovvero l’aver colto la mela... 


Google 


chi vespa mangia le mele 


o Q. 


Tutti Immagini Video Shopping Notizie Altro Impostazioni Strumenti 


SafeSearch attivo» 



























Parole = Gergo 

Una volta identificato il target di riferimento è necessario cominciare a capire 
quale può essere il relativo gergo di riferimento ovvero un set di parole che viene 
colloquialmente utilizzato (-gergo) dal medesimo target : il glossario-dizionario 
derivante da uno studio-analisi del genere è fondamentale per poi decidere il 
nome delle componenti dell’interfaccia da sviluppare quali ad esempio: 

• parole e contenuti testuali; 

• voci di menù; 

• nomi di eventuali elementi strutturali (immagini ad esempio). 

In assenza di altre possibilità di indagine o riflessione è possibile utilizzare uno 
strumento come https://trends.google.it/trends/?geo=IT che consente di trovare 
in maniera eventualmente geo-referenziata tendenze, nomi di tendenza e nomi 
simili a quello dell’argomento o della parole sotto osservazione... 


= GoogleTrends 

Italia 


Afghanistan 

Scopri quali ricerche si 

Albania 

fanno nel mondo 

Algeria 

Altre isole americane del Pacifico 

Inserisci un termine di ricerca o un argomento 

Andorra 


Attenzione ai falsi positivi 

Nell’esame delle parole relative o adiacenti (semanticamente) ad una parola data 
è importante fare attenzione all’eventuale emergere di falsi positivi ovvero a 
parole o interpretazioni semantiche apparentemente affini ed utili, ma che, in 
realtà, non appartengono al nostro ambito significativo specifico per cui la parola 
“responsive” può essere utilizzata nel design digitale quanto in ambito politico o 
educativo... 






X 



• responsive 


Tutto il mondo. Ultimi 12 mesi 


Argomenti correlati... In aumento » ♦ < > Query associate 


In aumento 


± <> < 


1 ReactJS - Argomento 


responsive industries 


2 Cultura - Argomento 


2 responsive education Solutions 


3 center for responsive politics 


4 responsive checker 


5 datatable responsive 


il Sentiment 

Studiare la tendenza e l’utilizzo sotto il profilo quantitativo di determinati 
termini può essere utile anche per determinare il sentiment ovvero se un 
determinato argomento o brand viene percepito in maniera positiva o negativa 
associandolo a terminologia con particolari significati positivi o negativi. 
Numeri e tendenze del sentiment possono aiutare a capire il grado e la qualità di 
consapevolezza di un marchio ovvero la cosiddetta brand awareness. 






Contenuti = Repository = Licenze 

Per trovare ispirazioni o veri e propri contenuti riutilizzabili anche liberamente 
ed anche a fini commerciali è possibile fare riferimento alle licenze creative 
commons ed ancor più ad alcuni ! repository di contenuti digitali che 
contengono anche opere che sono riutilizzabili liberamente in quanto protette da 
licenze cosiddette di pubblico dominio o PD in inglese (Public Domain). Uno 
dei repository fra i più interessanti (ma attenzione contiene anche materiale 
coperto da tradizionale copyright...) è https://www.europeana.eu/portal/it dove si 
possono trovare decine di milioni di opere digitali molte delle quali riutilizzabili 
a vario titolo... 



europeana 

collections 


Collezioni'' Esplora' Esposizioni' Blog' 


I NOSTRI SITI 


31 LINGUA- 



Stili Life wìth Wild Strawberrles (detail), 1705, Adriaen Coorte 
Mauritshuis 


p Naviga 


term 


Esplora 58,245,986 opere d arte, manufatti, libri, video e suoni provenienti da tutta Europa 


© Public Domain » 


Europeana non è solo un fantastico magazzino di opere digitali messe a 
disposizione da una miriade di istituzioni culturali europee ma anche un’ottima 
palestra per esercitarsi nel comprendere il funzionamento delle licenze Creative 
Commons (CC): queste ultime possono essere utilizzate con piena validità 
giuridica per proteggere o viceversa diffondere i contenuti della propria 
interfaccia o la propria interfaccia nella sua integrità scegliendo fra le seguenti 
opzioni a disposizione su https://creativecommons.org 


• permettere o meno lo sfruttamento commerciale dell’opera 

• permettere o meno la possibilità di modificare l’opera 

• in ogni caso attribuire correttamente l’opera al suo autore citandone 
correttamente il titolo e la licenza di distribuzione assegnatagli 


Una scelta molto diffusa fra i giovani artisti che devono emergere e farsi 








conoscere è quella ad esempio della licenza Attribution-NonCommercial- 
NoDerivatives che oltre all’obbligatoria attribuzione si permette a chiunque di 
distribuire l’opera ma senza poterla modificare e specularci commercialmente... 


Allow adaptations of your work to be shared? 


10! No 


© 

Yes, as long as others share alike 


Allow commercial uses of your work? 

© 

O Yes O No 


© 

Selected License 


Attribution-NonCommercial-NoDerivatives 4.0 International 





“CHI DICE COSA” KIT DI 
VERIFICA DELL’INFORMAZIONE 
SOCIAL 


Pensi davvero che nel cellulare di Trump Kim Jong-un sia salvato in 
rubrica come ‘Cicciobomba Cannoniere’ oppure che uno studente fuori 
sede sia stato aggredito dalla sua biancheria sporca? Sei proprio sicura/o 
che quello che hai letto sui social e sul web sia oro colato? Non credere 
nei (social) media! potrebbe essere un improbabile tormentone-rap da 
tenere sempre a mente per convincersi sull’utilità di verificare 
un’informazione social! Nei prossimi dieci passi puoi capire come 
verificare una notizia e potrai scegliere la soluzione in base al tempo che 
vorrai spendere: il tempo scorre tic-tac... tic-tac... ma ricordati che più 
tempo dedicherai alla verifica della notizia e maggiori saranno le 
probabilità di verificare la certezza della notizia che hai intercettato. 

0) Scegli di capire 


((( un secondo ))) 

Scegli di capire e valutare cosa stai leggendo: è il primo passo 
fondamentale dopodiché potrai scegliere uno dei modi successivi 
proposti o se preferisci anche un tuo personalissimo approccio al 

problema... 


1) Cerca nella stessa notizia (=FONTE) riferimenti 
all'AUTORE ovvero CHI produce la notizia 



((( 15 secondi ))) 


É una soluzione semplice e velocissima: cercare - ed occorre spesso 
davvero pochi secondi - riferimenti tipo CHI SIAMO (about in inglese) 
nella notizia riportata cercando di capire la nazionalità ma soprattutto il 
credo religioso, filosofico o politico di chi ha prodotto la notizia in questa 
maniera valutandola con molta più efficacia. Utilizza lo stesso nome 
dell’autore come ricerca su Google: avrai così un colpo d’occhio sulle 
recensioni e il network di riferimento dell’autore. 


Esempio 

Nell’esempio riportato in immagine un interlocutore trova una notizia bizzarra sulle presunte ragioni per cui 
il terrorismo islamico non ha attecchito in Giappone, notizia che mescola riferimenti attendibili ad altre più 
discutibili che provengono da specifiche convinzioni politiche identificabili sulla base di un determinato 
credo politico. 

La verifica è stata svolta in meno di quindici secondi cliccando sull’indirizzo Web riportato nella 
conversazione su Skype e successivamente andando a leggere la sezione interna CHI SIAMO sul sito Web 
che ospitava le notizia e ha permesso di... 


RIFLETTERE MAGGIORMENTE SU QUANTO 
AFFERMATO SULLA BASE DEL CREDO DI CHI 
LO AFFERMA 



2) fai una ricerca utilizzando il TITOLO della notizia 
su Google per vedere nei risultati cosa appare 


((( 30 secondi ))) 


Prendi il titolo della notizia e cercali su Google od altro motore di ricerca 
nella sezione Web utilizzando se necessario anche la sezione IMMAGINI 
oltre che quella NOTIZIE: leggendo e visualizzando i risultati di ricerca 
potrai magari velocemente capire che la notizia ricercata è stata bollata 
come fake news (bufala) da altri che si sono preoccupati prima di te di 
verificarla. 

Strumenti utili online 

Oltre a Google od altro motore di ricerca può risultare utile aggiornarsi su 
alcuni portali che evidenziano le bufale più bizzarre ma anche più diffuse 
del momento: 

Il Disinformatico http://attivissimo.blogspot.it 
BUTAC Bufale un tanto al chilo http://www.butac.it 

Esempio 

A titolo evidentemente provocatorio su un argomento molto sentito come lo è quello dell’immigrazione 
viene diffusa l’improbabile notizia “Stupro libero per i rifugiati in Finlandia”. 

Basta fare una rapida ricerca con il titolo della notizia su un motore di ricerca per rendersi conto in pochi 
secondi come appartenga alla nota categoria "notizia bufala" (in alcuni casi soprattutto nel caso di ricerca 
di informazioni sull’autore occorre qualche manciata di secondi in più per rendersi conto con CHI-COSA 
abbiamo a che fare...). 

La verifica è stata svolta in meno di mezzo minuto e permette di... 


IDENTIFICARE UNA 1NOTIZIA BUFALA 




3) Wikipedia docet 


((( 45 secondi ))) 


WikiPedia rappresenta attualmente una fonte online autorevole e 
realizzata da una pluralità di autori che sottopongono continuamente il 
database informativo a verifiche di qualità incrociate. 

Cercando notizie sull’AUTORE o sull’OGGETTO della notizia su 
piattaforme di tipo Wikipedia sicuramente potrai trovare in meno di un 
minuto delle informazioni di riferimento mediamente interessanti ed 
affidabili, una base di riferimento da cui partire per eventuali 
approfondimenti. 

Strumenti utili online 

https://it.wikipedia.org 

https://www.wikipedia.org 

https://it.wikibooks.org 

https://it.wikinews.org 

VERIFICA INFORMAZIONI SU WIKIPEDIA 

La comunità di Wikipedia è continuamente in azione per verificare che non siano effettuate disinformazioni 
sulla piattaforma: 

1. ISpamming, come l'aggiunta di collegamenti esterni a fini promozionali o a siti non consentiti dalle 
regole di Wikipedia 

2. Aggiunta di parole senza senso o cancellazione non giustificata di parti del testo 

3. Creazione di voci prive di senso o con contenuto scherzoso/goliardico 

4. Inserimento, cancellazione o modifica di contenuti, template, dati, compiuti con un evidente 
interesse, una malafede e contrariamente al consenso, specie se reiteratamente 

5. Inserimento di informazioni volutamente errate 

6. Inserimento a fini di disturbo, anche in pagine di discussione, di testi in lingua diversa dall'italiano 

7. Inserimento di insulti o ingiurie, cancellazione, danneggiamento di pagine utente altrui 

8. Danneggiamento delle pagine di discussione delle voci di Wikipedia o degli utenti iscritti 

9. Inserimento di immagini provocatorie o volutamente fuori contesto 







10. Inserimento intenzionale di template non appropriati o eliminazione reiterata di template 
appropriati 

11. Spostamento di pagine in modo intenzionalmente inappropriato 

4) affidarsi alle proprie capacità logiche, di analisi e di 
riflessione 


((( un minuto ))) 

Qualsiasi notizia ti venga proposta puoi attingere alle tue 
conoscenze acquisite in materia di storia, fisica o quant’altro 
utile per valutare se ci possono essere degli aspetti 
platealmente incongruenti o improbabili rispetto all’argomento 
trattato. 

Sulla base delle proprie conoscenze acquisite farsi sempre una 
serie di domande tattiche quali... 

Perché? A chi giova? Ha senso? 

Esempio 

Gira una notizia per la Rete... Donna incinta per diciassette 
mesi. 

Beh, se davvero pensate che una donna possa rimanere 
incinta per 17 mesi allora rifate due chiacchiere con i prof di 
biologia, con la mamma, al consultorio e rimettevi in pari con il 
vostro percorso di educazione sessuale... 

Per evitare di fare figuracce e riportare magari la notizia agli 
amici aumentando così le dimensioni del pianeta Fuffolandia 



fate un bel respirone e prendetevi un minuto secco per riflettere 
su quanto letto online in base alle vostre conoscenze... 



5) controllare la correttezza ortografica di quanto 
detto 


((( un minuto e mezzo ))) 

Hai incrociato una frase con evidenti svarioni sintattici e grammaticali? 
Beh è un buon indizio per dubitare della medesima in quanto spesso e 
volentieri testi-bufala vengono prodotti tramite automatismi che spesso 
sono caratterizzati da errori ortografici. I tanti strumenti di correzione 
ortografica ma anche di traduzione utilizzabili online ti possono aiutare 
per capire se un testo è scritto correttamente ma anche cosa significa se 
scritto in una lingua sconosciuta o comunque difficilmente comprensibile 
(oltre che sentire come si pronuncia correttamente) e il tutto spendendo 
mediamente poco più di un minuto... 

Strumenti utili online 

http://sentencechecker.com 

https://translate.google.com 

https://translate.yandex.com 

http://translate.baidu.com 

Esempio 

L’importanza dell’ortografia: ladri di banca fregati da un refuso 

Criminali informatici non identificati sono riusciti a penetrare nei computer della banca centrale del 
Bangladesh e a sottrarre le credenziali necessarie per effettuare bonifici. Con queste credenziali hanno poi 
inviato una quarantina di ordini alla Federai Reserve Bank di New York, ottenendo inizialmente il 
trasferimento di somme ingenti a dei conti di complici nelle Filippine e nello Sri Lanka, per un totale di ben 
81 milioni di dollari. Ma poteva andare molto peggio: i ladri avrebbero potuto sottrarre molto di più se non 
avessero commesso un banale errore di ortografia. Quando hanno trasmesso il quinto ordine, per un 
bonifico da 20 milioni di dollari che aveva come beneficiario un’organizzazione non governativa dello Sri 
Lanka denominata Shalika Foundation, hanno sbagliato a scriverne il nome: hanno infatti scritto Fandation. 
Un intermediario presso la Deutsche Bank ha notato l’errore e ha chiesto chiarimenti alla banca del 
Bangladesh, che ha prontamente bloccato i bonifici rimanenti. 






6) Guarda cosa c’è dietro un video o un’immagine 


((( due minuti ))) 

se hai approcciato un'immagine o un video o un qualsiasi file allegato alla 
notizia prova a verificare i suoi meta dati segreti per capire se 
corrispondono a quanto affermato... se è un'immagine verificaie con un 
motore di ricerca immagini ( Google , Yandex...) od altri specifici per la 
funzione reverse search e vedi se è un'immagine già citata o utilizzata in 
altri contesti! Controlla anche la coerenza di orientamento di riflessi, 
colore ed ombre e l’eventuale riscontro con immagini da satellite. 

Esempio: un’immagine di un U.F.O. (Unidentified Flying Object) sull’Isola di 
Creta viene immediatamente confutata dai meta dati associati a 
queN’immagine che possono essere svelati da software apposito oppure 
servizi online e che in questo caso hanno svelato un probabile foto¬ 
ritocco con Photoshop impiegando meno di due minuti e controllando i 
relativi Exif Data ma anche verificando la replica-utilizzo della stessa 
immagine su altri siti Web con commenti chiarificatori... 

Strumenti utili online 

meta dati online http://exif.regex.info e caratteristiche difformi 
http://www.zeusnews.it/n.php?c=25585 tramite https://fotoforensics.com 
oppure https://29a.ch/photo-forensics/ 

reverse image search tramite Youtube and Facebook Video contextual 
verification : chrome- 

extension://mhccpoafgdgbhnjfhkcmgknndkeenfhe/invid.html 

confronta le notizie-immagini trasmesse su un territorio con foto satellitari 
(due servizi gratuiti sono Google Earth e Bing Maps ) oppure tramite 
riscontri ricostruibili scientificamente grazie a 
https://www.wolframalpha.com 











7) Chiedi a qualcuno che ne sa più te 


((( 15 minuti ))) 


Consultare una propria rete di conoscenza (famiglia, amici, prof, gruppi di 
affinità...) se si ha dei dubbi sulla notizia intercettata tenendo ben 
presente però i limiti di identità e pensiero della propria rete di contatti. 

Se non hai una rete di riferimento utile da utilizzare rispetto aN'argomento 
affrontato puoi divertirti ad utilizzare le varie piattaforme di 
IFactChecking che consentono di valutare insieme a comunità di 
giornalisti ed utenti online appassionati di procedure di verifiche online la 
veridicità della notizia acquisita. 

Considera che qualsiasi gruppo o comunità online può funzionare come 
IFactCecking ma che al tempo stesso i componenti della stessa comunità 
online, la loro autorevolezza e identità concorreranno alla qualità della 
verifica, risposta e valutazione rilasciata. 

Contattare e chiedere un parere di una persona fidata su un argomento 
può davvero essere questione di pochi minuti, un po’ di più (tempo) può 
occorrere se si fa riferimento al parere di una community online o di un 
servizio di domande e risposte come il popolarissimo lYahoo Answers 
oppure ad un servizio apposito di fact checking online. 

Strumenti online: 

Domanda e rispondi su lYahoo Answers https://it.answers.yahoo.com 

Piattaforma per la valutazione delle dichiarazioni dei politici italiani 
https://pagellapolitica.it 


8) provare a contattare testimoni diretti o interessati 




((( mezz’ora ))) 


Grazie alla Rete ora è decisamente facile entrare in contatto con 
qualsiasi persona di qualsiasi località. Un esempio clamoroso delle 
potenzialità comunicative ma anche di analisi delle informazioni 
geolocalizzate della Rete e dei social network è l’interfaccia avanzata di 
ricerca di twitter che consente di verificare cosa si dice (si cinguetta 
ovvero si twitta in gergo) nei dintorni di una determinata località 
nell’esatto momento in cui si fa una ricerca. Ovviamente il contatto 
personale e la verifica conseguente di quanto può succedere in una 
località al momento comporta qualche minuto di lavoro in più... 

Strumento utile Online 

Advanced Search di Twitter: https://twitter.com/search-advanced 

Da notare come nella schermata di esempio (alcuni tweet prodotti il 25 
agosto 2016 in un cerchio di 15 miglia da Amatrice) che riporta i tweet 
sulla tragedia del recente terremoto nel Centro Italia si possono 
riconoscere varie tipologie di intervento: 

1) messaggio tipicamente solidale che cerca di diventare virale 
utilizzando un hashtag ovvero #topic (argomento di discussione o di 
propaganda); 

2) messaggio apparentemente diffuso da un’istituzione ufficiale che 
richiede un contributo economico ; 

3) messaggio tipicamente di sconforto su come possa essere crollata 
una scuola teoricamente luogo sicuro per i bambini-alunni rafforzato da 
un’immagine di sicuro effetto. 



9) metti la notizia alla dura prova del mitico 
Verification Handbook 


((( due ore ))) 

Ebbene sì l’ultima opzione è decisamente impegnativa e la previsione di 
due ore di impegno è relativa ad una persona volenterosa e che ha già 
una certa dimestichezza con il linguaggio e gli strumenti della Rete: in 
ogni caso studiare questo testo è un’esperienza molto istruttiva e ti 
consentirà non solo di diventare un investigatore provetto delle 
informazioni online ma al tempo stesso un corretto scrittore di notizie 
online! 


Indice della versione italiana del Verification Handbook 

http://verificationhandbook.com 

1. L'informazione affidabile quando scoppia un’emergenza 

2. Le regole fondamentali della verifica 

3. Verificare i contenuti prodotti dagli utenti 

4. Verificare le immagini 

5. Verificare i video auto-prodotti 

6. Far lavorare la folla 

7. Integrare la molteplicità umana con la molteplicità computerizzata 

8. Preparare la copertura mediatica nelle situazioni d’emergenza 

9. Procedure e controlli per una verifica efficace 

10. Strumenti per la verifica 

10) Ah dimenticavo... oggi è il 1 aprile? 


((( bzzz.... ))) 



Ah beh, si beh... Il cosiddetto contesto è sempre importante da 
analizzare nel momento in cui riceviamo una notizia che ci colpisce in 
maniera particolare: magari siamo approdati sul mitico portale di notizie 
inverosimili http://www.lercio.it oppure appunto è il 1 aprile! A proposito 
da dove ha origine il pesce d’Aprile? Secondo Wikipedia una delle ipotesi 
più accreditate sull’origine del pesce d’aprile sarebbe da ricercare “In 
origine, prima dell'adozione del Calendario Gregoriano nel 1582, in 
Europa era usanza celebrare il Capodanno tra il 25 marzo ed il 1° aprile, 
occasione in cui venivano scambiati pacchi dono. La riforma di papa 
Gregorio XIII spostò la festività indietro al 1° gennaio, motivo per cui 
sembra sia nata la tradizione di consegnare dei pacchi regalo vuoti in 
corrispondenza del 1° di aprile, volendo scherzosamente simboleggiare 
la festività ormai obsoleta. Il nome che venne dato alla strana usanza fu 
poisson d'Avril, per l'appunto "pesce d'aprile".” 

Perché? 

Perché bisogna re-imparare a verificare le notizie intercettate? 

In questa era digitale di surplus di informazione ma anche di informazioni 
e relazioni che ci circondano disegnate sulla base delle nostre preferenze 
personali rischiamo di scivolare verso una china di acquisizione e 
metabolizzazione dell’informazione in senso a-critico. Qualsiasi ricerca di 
informazione online anche improbabile può dare dei risultati di ricerca 
apparentemente interessanti e validi, inoltre quale che sia il mio network 
social di riferimento è alto il rischio di passare il tempo circondati da 
riflessioni e contatti che fanno riferimento a una stretta cerchia 
autoreferenziale (effetto SFilter Bubble). 

L’informazione digitale è dopodiché volatile e spesso consumata al 
momento senza una necessaria attitudine di riflessione ed analisi della 
medesima. 

Questo accade perché è più comodo ed appagante comportarsi 
circondarsi di informazione che in fondo è in sintonia con il nostro io) 
piuttosto che mettere in discussione sé stessi oltre che la notizia 
acquisita. Tutto ciò lo giustifichiamo con l’alibi del tempo che non 
abbiamo da dedicare a riflessioni, analisi e verifiche dell’informazione 



acquisita online. Eppure, come cerca di dimostrare questo kit di verifica 
dell’informazione social CHI dice COSA occorre poco, pochissimo tempo 
per rendersi conto della validità deN’informazione intercettata: proprio per 
questo vengono proposte soluzioni diversificate rispetto al tempo a 

propria disposizione. 

((( post X ))) sezione speciale Hello 
Bot! 

Decalogo per riconoscere e dialogare 
efficacemente con robot, bot online e 
sistemi di intelligenza artificiale 

ovvero sei sicur§ di avere a che fare 
con un interlocutore umano piuttosto 
che con un (ro)bot? ...e soprattutto 
nel caso sai come dialogare 
correttamente con un (ro)bot? 

1) Per capire se hai di fronte un 'automatismo' fai subito una domanda 
fuori-luogo e assurda e ancor meglio prova a sottoporla in gergo- 
dialetto a tua scelta ad esempio: "attacchiamo bottone"? (se non 
comprendi il gergale 'attaccar bottone' sei te stess@ un robot: prendine 
coscienza!)?) Pensa sempre al contesto ambientale e all'obiettivo 
presunto da raggiungere nello scambio comunicativo quindi se sei di 
fronte ad un robot-barista inutile parlare degli acquisti della 
Fiorentina : quel tipo di conversazione riservalo per un barista-umano... 
al robot devi limitarti a richieste a richieste on-topic al contestocome 
"Vorrei un Cappuccino molto caldo". 

3) Controlla la sintassi e l'ortografia di ciò che esprimi se necessario 
tramite appositi servizi-app online. 

4) Parla sempre lentamente, ad alta voce, pronunciando correttamente le 
parole con voce ben scandita: se hai difficoltà a riguardo utilizza pure 
uno dei tanti sistemi-app di ! Sintesi Vocale o ! translate online. Se 
stai dialogando con un sistema di ! Intelligenza Artificiale 
sottoponendogli dei dati preoccupati che siano scritti ma soprattutto 



etichettati in una linguaggio naturale ben comprensibile dal medesimo 
sistema di MI. 

5) Fai attenzione a quali ! parole chiave utilizzi all'interno della tua 
frase perché se utilizzi delle parole (chiave) ben precise attivi 
analisi e comandi di conseguenza. 

6) Utilizza frasi brevi, chiare e dirette cercando di mantenere il senso 
logico della tua richiesta o comunicazione all'interno di una stessa 
frase limitando più possibile lo story-telling in frasi diverse e 
consecutive. Salvaguarda il senso della frase-richiesta utilizzando meno 
concetti possibile ed espressi chiaramente. 

7) Se la conversazione si sviluppa con frasi consecutive cerca sempre di 
mantenere un filo logico più semplice ed efficace possibile nel dialogo 
in atto. 

8) Rifletti sempre sul ! sentiment che trasmetti con le tue frasi e con 
le parole utilizzate perché possono influenzare le risposte e il 
comportamento del bot che hai di fronte. 

9) Attent@ aulla mimica facciale, ai gesti e al tono della voce quando 
comunichi con un (ro)bot 

10) Se non sei soddisfatt§ del risultato ottenuto cerca di farlo capire 
esplicitamente trovando la maniera di tornare al punto di inizio del 
dialogo. 



Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) brand ed 
eventuale payoff scelto per l’interfaccia in sviluppo, un elenco di almeno dieci 
parole che possono essere assimilate al gergo del target di riferimento preso in 
considerazione, la tipologia di licenza con la quale vuoi proteggere o diffondere 
contenuti ospitati dalla tua interfaccia o l’interfaccia stessa nella sua integrità. 



Accedere è il primo passo 

L’accessibilità viene spesso percepita come una problematica che riguarda 
(poche) persone disabili sottovalutando alcuni aspetti fondanti della nostre 
possibilità percettive per cui siamo tutti diversi e tutti possiamo percepire 
l'informazione (digitale) in maniera diversa. Occuparsi dell’accessibilità può 
sembrare prematuro in una fase iniziale di design digitale ma in realtà è 
importante prendere subito conoscenza delle esigenze di accessibilità perché può 
rendere il lavoro di progettazione di maggiore qualità in generale fin da subito e 
sopratutto far risparmiare interventi che, se fatti a posteriori, esigono sforzi 
operativi molto più ingenti di quanto sarebbero se venissero realizzati in fase 
iniziale. 



Percezioni 

Video 

Il famoso esperimento del vestitino bianco/oro o nero/blu ha catturato 
l’attenzione di giovani frequentanti i social e se la (possibile) spiegazione si 
fonda su diverse capacità ed interpretazioni sensoriali condizionate anche da 
fattori ambientali (colori-sfondi adiacenti e condizioni di illuminazione...) ci ha 
convinti che ebbene sì siamo diversi gli uni dagli altri dal punto di vista di 
possibile percezione ed elaborazione sensoriale e che quindi la questione 
dell’accessibilità ci riguarda (tutti nessuno escluso) ed eccome! 
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Audio 

Se l’esperimento del vestitino non vi ha convinto allora provate a livello audio a 
capire se percepite Yannv o Laurei dal video ospitato su Reddit e che dimostra 
(dai commenti ospitati) come anche la percezione audio può differire 
notevolmente... 


00 : 00 / 00:00 








Segui il cuore o "follow thè money" 

Un’altra questione sollevata dall’accessibilità spesso disattesa riguarda la doppia 
valenza: da una parte etica e dall’altra commerciale. Da un punto di vista morale, 
dovrebbe essere sentita da tutti noi l’esigenza di comunicare con qualsiasi 
persona-target indipendentemente dal tipo di limitazione sensoriale o funzionale¬ 
fisiologica che può caratterizzarla, da un punto di vista di convenienza 
commerciale, potreste riflettere su quanto siano ampiamente diffuse le disabilità 
a livello statistico ed addirittura, cinicamente parlando, in mercati importanti 
come quello degli USA (fonte https://www.includification.com f dove su una 
popolazione di 325 milioni di abitanti superano i venti milioni i veterani di 
guerra di cui un quarto affetti da una qualche forma di disabilità (senza prendere 
in considerazione i disabili civili). 


Se il tuo cuore non ti convince, “follow thè money” e ragiona in termini di 
ampliamento di mercato... 







Chi-cosa ci guadagna 
dall'accessibilità 

Non sono sole le persone disabili a trarre vantaggio di contenuti ed interfacce 
accessibili, ma è ampio lo spettro di chi può migliorare la propria esperienza 
utente rispetto ad un’interfaccia utente... proviamo a stilare un sintetico elenco: 

• noi tutti (usufruire di un’interfaccia accessibile è più appagante e comodo di 
usufruire di un’interfaccia non accessibile, così come per salire ad un 
settimo piano di un palazzo prendo l’ascensore per comodità ed efficienza 
anche se non viaggio con una sedia a rotelle); 

• le persone disabili (anche se è impossibile realizzare un’interfaccia 
perfettamente accessibile per qualsiasi tipo di disabilità con un’unica 
versione); 

• i motori di ricerca come Google (non a caso definito il più potente non 
vedente del pianeta Terra dato che privilegia i siti Web accessibili percepiti 
esattamente come li percepirebbe una persona non vedente attraverso 
l’ausilio degli ! screen- reader); 

• i social network come Facebook così come gli assistenti vocali e qualsiasi 
altra tipologia di bot interessato ad interpretare l’informazione digitale 
percepibile correttamente. 



Informazione ed interfaccia 
accessibile 


La questione dell’accessibilità è estremamente complessa: ad esempio per il Web 
esistono raccomandazioni internazionali note come le WCAG - Web Content 
Accessibility Guidelines il cui secondo livello è stato individuato come 
riferimento da molte normative nazionali (italiana compresa) così come esistono 
linee guida per ogni tipologia di settore specifico come ad esempio le fantastiche 
http://gameaccessibilityguidelines.com che ci guidano nelle raffinate soluzioni 
adottate da tutti i principali videogame commerciali per ampliare il più possibile 
la propria audience cercando di trovare soluzioni adatte alle diverse 
caratteristiche delle persone con disabilità. 

Per esempio 1’audio-video-gioco Nicolas Evmerich Linquisitore offre svariate 
soluzioni quali la pissibilità di attivare uno speciale pannello controllo dialoghi 
in cui, nella versione maggiormente accessibile pensata per le persone 
dislessiche, sono ben evidenti i controlli dell’audio-video, il focus del mouse è in 
evidenza ed il font utilizzato per i sottotitoli è decisamente più leggibile rispetto 
alla versione standard. 



In definitiva se l’interfaccia o i contenuti risultano accessibili per le diverse 
esigenze delle persone disabili allora non c’è necessità di trovare soluzioni 
supplementari specifiche che in gergo sono denominate alternative testuali. 
Alcuni aspetti di accessibilità travalicano l’utilizzo di alternative testuali ed un 
paio di esempi importanti sono: 

• evitare di assegnare in maniera esclusiva del valore comunicativo 
significativo ad un colore; 

• evitare intermittenze animazioni ovvero mutamenti repentini di oscurità e 











luce che abbiano delle caratteristiche potenzialmente pericolose per chi 
soffre di epilessia (intermittenze superiori a tre battiti al secondo costituite 
da aree significative dello schermo, ancor più gravi se comprendenti il 
colore rosso). 

Se viceversa l’interfaccia si deve presentare per motivi grafici senza essere 
dotata di informazione testuale facilmente interpretabile dagli ausili come gli 
screen-reader od altra tipologia di comunicazione facilmente interpretabile allora 
è necessario dotarsi di... 



Alternative (testuali?) 

Sono dette alternative e perlopiù alternative testuali tutte quelle soluzioni che 
facilitano la comprensione e la fruizione di un’interfaccia e di un contenuto 
digitale da parte di una persona disabile ma in realtà sono numerose le soluzioni 
redazionali e tecnologiche disponibili per rendere un’interfaccia ed il suo 
contenuto accessibile e non tutte, come vedrete, sono testuali... 

Linguaggio dei Segni 

Partiamo dal difficile e cerchiamo di capire come la maggior parte delle persone 
sorde preferisca usufruire del linguaggio dei segni e che il medesimo differisce 
per ogni Paese del mondo similmente a come differiscono i linguaggi naturali a 
noi noti - per esempio, fra una persona di lingua spagnola ed una di lingua 
giapponese. Una versione accessibile per persone sorde di un’interfaccia digitale 
dovrebbe essere dotata di appositi video realizzati con la lingua dei segni relativa 
al target geografico di pertinenza: se volete vedere un esempio italiano curiosate 
nel vlog (video-blog) realizzato da persone sorde all’indirizzo web 
https://vlogsordi.blogspot.com 



Guardate i video-esempi della traduzione di viaggiare in lingua ucraina e poi in 
lingua svedese tratti da https://www.spreadthesign.com/it.it/search/ 








00 : 00 / 00:00 



(la traduttrice ucraina fa un segno deciamente diverso da quella svedese 
utilizzando la prima addirittura due mani per comporre una tipologia di gesto e 
la seconda solo una...) 

Comunicazione Aumentata e Alternativa 

Continuiamo con esempi poco noti in tema di alternative accessibile, ma proprio 
per questo importanti come lo sono i siti web ed ebook nonché applicazioni di 
Comunicazione Aumentativa e Alternativa particolarmente utili per persone 
con deficit cognitivo come le persone autistiche che sono avvantaggiate da 
semplici informazioni costituite da testo semplice e chiaro accompagnato da 
immagine esplicativa. 

Alternative testuali vere e proprie 





























Molte persone disabili come ad esempio non vedenti, non udenti e persone 
dislessiche possono trarre vantaggio da informazione testuale che sia una valida 
alternativa (equivalente) a ciò che viene percepito come audio, video od 
immagine in alcuni casi grazie anche all’ausilio di screen-reader che possono 
trasformare il testo in informazione percepibile tramite comunicazioni audio o 
braille. 


Immagini 


Le immagini per poter essere correttamente interpretate devono essere associate 
a testo equivalente, ma ove non è possibile è necessario nominarle in maniera 
significativa e/o dotarle di apposito attributo alt che le descrive opportunamente 
nel caso di editing di siti Web oppure usufruire delle opzioni di accessibilità 
nell’editing delle immagini per i social per aggiungere adeguate alternative 
testuali (descriptive alternative text). 

Audio-Video 
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Cerca in HTML 


<img att="autore Enrico Bisenzi" src=" ../imaaes/users/avatar-001. 


Nel caso di audio-video è fortemente consigliabile accompagnare il medesimo 
da una descrizione testuale equivalente, ma se, ad esempio nei video, le linee 
grafiche non consentono di accompagnare l’oggetto multimediale con testo 
equivalente di accompagnamento allora è possibile usufruire di standard quali 
Web Video Text Tracks da applicare tramite opportuno codice di markup di 
sottotitolazione sincronizzata : < v i d e o 


src="video_da_sottotitolare.ogv"><track 
kind="subtitles" src="sottotitoli-it.vtt" srclang="it" 
label="italiano" defaultxtrack kind="subtitles" 
src="sottotitoli-en.vtt" srclang="en" label="english"> 
</video> 


Esempio di : [idstring] [hh : ]mm : ss . msmsms --> 

[hh : ] mm:ss.msmsms [cue settings] Text stringCue-8 
00:00:52.000 --> 00:00:54.000 <v Emo>I don't think so. 
<c.question>You?</c></v>Cue-9 00:00:55.167 --> 
00:00:57.042 <v Proog>I'm Ok.</v> 




Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) il colore del 
vestitino ed audio che hai percepito, le caratteristiche eventuali di inaccessibilità 
dell’interfaccia che hai progettato o in fase di restyling (quali sono e per quali 
disabilità? come pensi si potrebbe risolverle?). 



Wireframe e Workflow 

Da un punto di vista di architettura dell’informazione si può definire il 
wireframe come il disegno schematico e strutturale di un’interfaccia 
relativamente alle sue dinamiche di utilizzo. 

Grazie a strumenti come https://wireframe.cc è possibile realizzare un’idea di 
come si possa disegnare un ’idea o come si potrebbe dire in altri termini uno 
sketch di un’interfaccia disegnando uno schizzo-bozza di quello che potrebbe 
essere l’idea di progetto o di restyling dell’interfaccia in oggetto di lavorazione, 
magari adattabile alle varie tipologie di device e relative risoluzioni (desktop, 
mobile, eccetera) attraverso il disegno schematizzato dei suoi componenti. 



□ □OH = =GiTin 



La medesima bozza-idea di interfaccia schematizzata può essere riprodotta in 
varie schematizzazioni esponendo linee di collegamento fra funzioni in 
successioni che possono rendere l’idea di quale può essere l’esperienza utente 
(User eXperience) di un ipotetico utente ovvero il suo flusso di utilizzo o 
workflow. Ovviamente più sono le ipotesi di utilizzo differente di una medesima 
interfaccia e più workflow devono essere ipotizzati salvo sottoporli poi a 
meccanismi di verifica post-produzione (vedremo più avanti cosa vuol dire e 
come si eseguono queste procedure di controllo). 










Esempio di Wireframe denominato Time Bank Wireframe - iteration realizzato a cura di Mark Congiusta 
(Attribution 2.0 Generic https://creativecommons.Org/licenses/bv/2.0/ ) nel quale sono ravvisabili alcuni 
frammenti di workflow relativi a funzionalità specifiche ipotizzate. 








































































































































































Ispirarsi a case history di successo 

Una buona regola può essere quella di ispirarsi a case history di successo perché 
possiamo pensare di avere l’idea più originale del mondo a livello di design di 
interfaccia ma è più saggio rimanere umili e vedere cosa è stato realizzato e cosa 
ha avuto successo nel nostro stesso settore d’intervento prima di cominciare a 
progettare non fosse altro per trovare ispirazioni e testare la bontà delle nostre 
(ispirazioni). 

Studiare i propri competitor 

Considerate che, magari, nel medesimo settore di intervento c’è chi ha già 
investito creatività, tempo e denaro per raggiungere gli stessi obiettivi ed allora 
perché non studiare la propria concorrenza? Un atteggiamento umile ed analitico 
può far risparmiare tempo e denaro salvo riservarsi la libertà di trarre ispirazioni 
ed adattare intuizioni alla propria creatività e capacità di progettazione. 



È una questione di Usabilità 

Il tutto gira intorno al concetto di usabilità ovvero a quanto può essere 
performante la nostra interfaccia nel farsi utilizzare da uno determinato target di 
riferimento, rispetto ad un obiettivo comunicativo di carattere generale ma anche 
relativamente a determinati compiti (task) specifici che la stessa utenza può 
svolgere sulla nostra interfaccia come trovare un’informazione, contattare un 
helpdesk, valutare o acquistare un prodotto o un servizio, apprendere un 
determinato know-how. 

Bisogna, più in generale, riuscire nel difficile intento di conquistare l'utenza 
finale in termini di apprezzamento ed attenzione ed imporre il proprio 
linguaggio comunicativo e la propria logica funzionale di utilizzo 
dell’interfaccia stessa. 

Per far questo bisogna però essere coscienti di quali sono gli accorgimenti 
necessari per: 

• evitare di perdere l’utenza finale che, statisticamente, impiega due-tre 
secondi prima di decidere se continuare o meno nel provare l’interfaccia 
digitale che ha approcciato; 

• conoscere le regole generali di usabilità di una qualsiasi interfaccia digitale. 
È necessario sempre sapersi calare nei panni dell'utente finale (target) e 
prevedere quali potrebbero essere gli elementi critici che potrebbero portare il 
nostro utente finale ad abbandonare subito la nostra interfaccia, in particolare 
evitando: 

• contenuti non strutturati logicamente e conseguenti meccanismi di 
navigazione inefficaci (vale sempre la regola che in tre click-passaggi 
devono poter svolgere qualsiasi funzione specifica o arrivare ad acquisire 
qualsiasi informazione specifica contenuta nell’interfaccia); 

• troppa pubblicità o pubblicità eccessivamente invasiva; 

• audio o video che partano automaticamente senza possibilità di controllo a 
posteriori; 

• meccanismi di registrazione obbligatori posizionati all’inizio 
dell’esperienza utente; 

• contenuto e grafica noiosa o scarsamente leggibile; 

• contenuti non aggiornati. 

Viceversa è sempre importante tenere a mente le principali euristiche di Nielsen 



(padre moderno dell’usabilità digitale) che consigliano di: 

• tenere sempre informati gli utenti su cosa sta accadendo (se, ad esempio, 
stai facendo scaricare qualcosa è opportuno far sapere all'utente quanto 
manca al completamento del download); 

• iconicamente e metaforicamente mantenere sempre una connessione logica 
con la realtà così come normalmente percepita (uno STOP ad un’azione 
potrebbe, ad esempio, essere iconicamente rappresentato da un semaforo 
rosso - problemi di accessibilità a parte); 

• far mantenere il controllo delle azioni all’utenza finale consentendo, ad 
esempio, di annullare operazioni in corso o tornare sui propri passi; 

• l’informazione e le soluzioni di design devono essere ridotte al minimo per 
non mettere in difficoltà l’utenza finale. 



Puntare ai risultati: cali to action 


Quel che conta sono dunque i risultati che in gergo vengono dett,e anche 
conversioni: se è una piattaforma che vende, ciò che conta cono i prodotti 
venduti; se è un’interfaccia per aumentare l’audience di riferimento quanti 
contatti si riescono a stabilire; se è un servizio di e-learning quanti studenti 
riescono a passare con successo le verifiche online. Inutile farsi irretire da altre 
metriche o ! analytics - comunque importanti per capire come interagisce 
l’utenza finale - quel che conta è il risultato finale (conversione) all’interno del 
cosiddetto funnel esperenzialel È fondamentale collocare il meccanismo di cali 
to action (bottone di acquisto, form di richiesta contatti eccetera) 
opportunamente nel diagramma di flusso (workflow) e su tutti i nodi funzionali 
di un'interfaccia affinché alla fine di un qualsivoglia esperienza dell’utente finale 
portata avanti con soddisfazione lo stesso utente finale sia messo in condizione 
di convertire e venga quindi chiamato all’azione. 


The Purchase Funnel 



Esempio di funnel esperienzale finalizzato ad un acquisto realizzato da BronHiggs 
(Creative Commons Attribution-Share Alike 4.0) nel quale si ipotizza con chiarezza 
di far prendere consapevolezza all'utente finale, conquistare il suo interesse, 
suscitare desiderio ed infine spingerlo all'azione. 




Feedback, comunque 

I meccanismi di feedback NON vanno necessariamente identificate con le 
call2action ma sono invece tutte quelle opportunità offerte dai meccanismi della 
comunicazione digitale quali: 

• chat; 

• messaggistica di vario tipo (compresa la posta elettronica); 

• forum; 

in cui sia possibile confrontarsi direttamente e senza alcun tipo di filtro con 
l’utenza finale dell’interfaccia realizzata. 

Sono opportunità per certi versi rischiose, vista la maleducazione diffusa online 
che sfiora atteggiamenti ingiustificati di hating vero e proprio, ma sono al tempo 
stesso dei meccanismi preziosi per valutare il proprio operato e ricevere 
segnalazioni sulla qualità del proprio operato. 



Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) il wireframe 
dell’interfaccia che si sta progettando o rimodellando (restyling) nonché il 
workflow rispetto ad almeno tre ipotesi di utilizzo dell’interfaccia stessa. 



I linguaggi del Web come matrice comune del digitale 

È importante prendere dimestichezza con i linguaggi del Web perché il Web ed i 
suoi linguaggi rappresentano la vera e propria matrice di tutta la filiera della 
Comunicazione Digitale. Sulla triade di linguaggi html-css-javascript (ed affini) 
è basata la comunicazione Web resa sempre più complessa e performante dallo 
sviluppo di ! f ramewor k e CMS (Content Management Systems), ma i 
linguaggi del Web si prestano ad essere traslati in maniera flessibile per 
realizzare a sua volta app o ebook che a volte parlano proprio la stessa tipologia 
di linguaggi come nel caso delle Web App oppure degli ebook di tipo ePub. 

HTML = Struttura 

L’HyperTextual Mark-Up Language è un linguaggio fondamentale da 
padroneggiare quanto meno nei suo fondamenti perché ci permette di scrivere 
ex-novo ma ancor più spesso analizzare ed eventualmente correggere (magari 
con il supporto di qualificate risorse tecniche) molte componenti fondamentali di 
un’interfaccia quali: 

• i meta dati attraverso i ! tag title e description che concorrono in maniera 
significativa a rappresentare le interfacce su molte piattaforme di 
indicizzazione e catalogazione a partire dai motori di ricerca; 

• tutte le denominazioni dei componenti strutturali di un’interfaccia quali 
ad esempio i tag di tipo h ma soprattutto i nomi di file e di cartelle che 
concorrono in maniera significativa a indicizzare le interfacce su molte 
piattaforme quali i motori di ricerca; 

• alcune componenti di schematizzazione che, naturalmente, anch'esse 
concorrono in maniera significativa a catalogare le interfacce su molte 
piattaforme come i motori di ricerca; 

• i tag div che rappresentano in qualche maniera i singoli mattoncini- 
componenti di un’interfaccia associabili ad una determinata classe o id che 
può essere a sua volta associata ad un determinata tipologia di layout o 
funzionamento; 

• per ultimo - ma è il più importante - il tag a (anchor) che determina la 
possibilità o meno di creare collegamenti e quindi determinare la natura di 
ipertesto (ed ipermedia) delle interfacce digitali. 

Regole di scrittura 



l’HTML ha poche ma importanti regole di scrittura fra qui spicca quella di dover 
nidificare correttamente i tag - possono essere scritti uno dentro l’altro ma 
devono aprirsi e chiudere gli uni dentro gli altri senza intersecazioni errate un po’ 
come quando si doveva imparare ad includere le parentesi tonde dentro le quadre 
in un’espessione algebrica [...(.ma soprattutto bisogna imparare che i tag 
(marcatori) possono avere degli attributi a loro volta contraddistinti da un valore 
che contribuiscono a definire funzionalità e semantica dell'elemento marcato, ad 
esempio il semplice codice: 

<a href—"http://www.html.it/">linguaggi per realizzare 
le pagine Web</a> 

mi identifica una frase 'linguaggi per realizzare le pagine web’ che è interessata 
dall’azione del tag (marcatore) a che a sua volta ha un attributo href che a sua 
volta avendo un valore corrispondente ad http : //www .html.it mi 
determina la creazione di un hyperlink al sito web stesso. 




CSS = Layout 

I Cascading Style Sheets - fogli di stile a cascata - è una tecnica che consente di 
introdurre efficacemente ed economicamente (nel senso di razionalizzazione 
delle energie a disposizione) elementi di stile (formattazione grafica o layout). 
Una delle caratteristiche funzionali più importanti dei CSS è la cosiddetta 
ereditarietà ovvero la possibilità di cui gode l'elemento figlio di ereditare 
indicazioni di formattazione grafica dall'elemento padre. 

Regole di scrittura 

Sebbene i fogli stile siano una tecnica MOLTO complessa da padroneggiare, 
alcune sue regole base sono relativamente semplici ed il funzionamento base dei 
css è un tipo di know-how indispensabile per chiunque ha necessità di 
rapportarsi a vario livello rispetto alla progettazione Web. Le regole dei fogli 
stile si applicano a selettori e marcatori attraverso una cosiddetta dichiarazione 
di stile contenente proprietà e valori e quindi il loro funzionamento è 
inscindibile dalla marcatura di tipo html. Gli elementi a cui si applicano gli stili 
possono essere cosiddetti di blocco ovvero che si estendono per intero in 
larghezza (ad esempio come p, table,, hi e h2) oppure in linea ovvero che 
condividono la loro posizione orizzontalmente con altri elementi (ad esempio a, 
img, span o mark). Similmente ai marcatori html i fogli stile sono caratterizzati 
da selettori a cui possono essere associate delle proprietà a cui a loro volta 
possono essere associati dei valori come si può evincere dagli esempi elencati 
sopra. 

I selettori associati ad un determinato marcatore ereditano le proprietà dai 
marcatori nel quale è eventualmente nidificato attraverso regole ben precise: per 
poter attribuire con precisione determinate proprietà di formattazione grafica ai 
marcatori, gli stessi possono essere identificati in maniera univoca tramite un 
identificativo (ID) oppure accorpati in classi (CLASS). L'identificativo ID è 
particolarmente importante in quanto ad esso può essere associato non solo un 
determinato foglio stile, ma anche un punto di ancoraggio (stile attributo name ), 
una funzionalità javascript, un elemento dichiarato object oppure per 
l'identificazione di campi nel caso di estrazioni di dati per un database. 

II selettore id viene richiamato dal simbolo speciale nella dichiarazione di stile e 
si applica a un solo elemento della pagina web, il selettore class viene richiamato 
dal simbolo nella dichiarazione di stile e si può applicare a più selettori o 
marcatori associati alla relativa classe: id e class sono assegnati tramite gli 



omonimi attributi. 


CSS (similmente all'html) è un linguaggio di editing che può essere associato in 
tre maniere diverse: tramite uno stile in linea è possibile determinare lo stile di 
un singolo elemento della pagina web, con lo stile incorporato lo stile di una 
singola pagina Web mentre con lo stile collegato si può virtualmente determinare 
lo stile di un intero sito Web: l'efficienza e la comodità dei risiedono infatti 
anche nella possibilità di comandare lo stile di più elementi e di più pagine web 
facendo riferimento ad una unica regia di stile determinando un notevole 
risparmio in termini di codice e banda. 

Stile in linea 

<p style="color: white; background: black;">Sezione 
testo colore 

bianco su sfondo nero</p> 


Stile incorporato 

1 . <html> <head> <title>Inserire i fogli di stile in 
un documento</title>h6 {color: red; } </head> 

<h6>marcatore html di tipo h6</h6> 

<h6>marcatore html di tipo h6</h6> 

<body> 

marcatore html di tipo h6 

marcatore html di tipo h6 
Stile collegato 

<html> <head> <title>Inserire i fogli di stile in 
un documento come file di testo collegato di tipo 
css</title><link href="../css/base.css" 
rel="stylesheet"x/head> <body> 

Come risultato si ereditano tutte le dichiarazioni di stile presenti nel foglio 
di stile denominato base.css da ricercare nella cartella (dir) css 



JavaScript = Funzionalità 

È un linguaggio di ! scripting che deve il suo nome alla sua sintassi simile 
quella del linguaggio Java comunemente utilizzato per introdurre funzionalità 
nei siti Web, ma ultimamente reso popolare per la realizzazione di app per più 
sistemi operativi in sinergia, ovviamente con i linguaggi html e css. 

Se la conoscenza di questo linguaggio di programmazione travalica le 
conoscenze di chi scrive, ma anche le finalità di questo testo didattico è 
sufficiente saper riconoscere l’eventuale inclusione di un codice javascript nel 
codice sorgente di una pagina Web - alias interfaccia digitale - individuando la 
stringa... 

<script type="text/javascript"> 

all’interno della quale, come vedremo più avanti, è possibile associare 
funzionalità, ad esempio e relativamente alle finalità di questo testo didattico, 
finalizzate a monitorare il comportamento dell’utenza finale su una qualsiasi 
interfaccia digitale. 



Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) una pagina di 
scrittura di prova dei linguaggi html-css-javascript 
https://codepen.io/sandropaganotti/pen/JvepK/ modificando contenuto, e 
variando ed aggiungendo codice di vario tipo: descrivi ed allega il risultato 
ottenuto, prova inoltre ad utilizzare Atom o software a tuo piacimento 
equivalente provando a modificare file html-css-javascript e verificando tramite 
browser l’effetto delle modifiche apportate. 




Mockup e Prototipo 

Alla realizzazione di un wireframe e relativi ipotesi di workflow deve 
necessariamente seguire la fase di mockup ovvero quella del montaggio della 
grafica sulla bozza di interfaccia ipotizzata al fine di valutarne la gradevolezza 
estetica e l’efficacia comunicativa ed a seguire la realizzazione di un prototipo, 
la prima realizzazione operativa dell’interfaccia vera e propria dotata di tutte le 
funzionalità e quindi da testare sotto il profilo anche delle esigenze di usabilità 
precedentemente trattate. 

Per entrambe le funzioni tornano utili i linguaggi del Web, ma soprattutto le 
applicazioni e ancor più i framework e i content management System che sui 
linguaggi del Web sono basati. 

I vantaggi di un CMS Online 

La possibilità di utilizzare un Content Management System per montare la 
grafica su un’idea di interfaccia per poi farla evolvere a livello di prototipo 
(sistema interattivo e pienamente operativo in tutte le sue funzioni pur nella sua 
natura alfa di prima versione ) è una possibilità che ci offre il sistema Web 
offrendoci al tempo stesso - per la sua stessa natura ipertestuale - di metterci in 
relazione con il nostro target di riferimento (o audience-pubblico che dir si 
voglia) e quindi poterne testare l’efficacia. I CMS sono sempre più complessi e 
ricchi di funzione, ma al tempo stesso relativamente semplici da utilizzare: lo 
vediamo utilizzando come esempio uno fra i più apprezzati ed utilizzati al 
mondo... 

Wordpress 

Rispetto all’idea di montare della grafica su un wireframe e farlo evolvere a 
livello di mockup e quindi renderlo interattivo per poterlo definire a pieno titolo 
un prototipo, WordPress è una soluzione open-source - che può essere utilizzata 
sia come free ! hosting su un ! sotto-dominio di https://it.wordpress.com 
(limitato e ospitante pubblicità di terze parti) sia installata su un proprio server 
da https://it.wordpress.org 

Grafica = Temi 

Lo strumento principale offerto da Wordpress per far evolvere il proprio 
wireframe alla natura grafica-comunicativa di Mockup è sicuramente il 
cosiddetto tema ( theme in inglese). Anche se il Web presenta dei limiti di 




rappresentazione (pochi in realtà) è veramente enorme l’offerta di tempiale 
ovvero modelli grafici di partenza che possono essere scaricati da 
https://it.wordpress.org/themes/ oppure selezionabili per il proprio sotto-dominio 
da https ://wordpre ss. com/theme s/ 


WordPress.com themes 
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La scelta è veramente ampia (anche fra quelli gratuiti-free) potendo filtrare la 
propria scelta rispetto alla tematica trattata, meccanismi di navigazione preferiti, 
tipologie di layout, numeri ed organizzazione delle colonne (ed ovviamente tutto 
può essere adattabile in ottica responsive ), mood grafico da trasmettere. 

Per poter scegliere però consapevolmente è necessario conoscere alcune logiche 
di strutturazione contenuti adottate da WordPress e peraltro replicate similmente 
su qualsiasi cms: i contenuti si dividono fra pagine fisse perlopiù utilizzate nei 
vari menù e post che invece sono articoli con in evidenza la data di realizzazione 
in quanto hanno una funzione principale comunicativa di storytelling. I menù 
sono ampiamente configurabili e quando rappresentati sulla sezione in verticale 
spesso affiancati da possibili innesti informativi o funzionali speciali denominati 
widget. Manco a dirlo tutto può essere personalizzabile salvo conoscere la logica 
di editing html-css. 

Funzionalità = Plugin 

I plugin (estensioni) sono delle funzionalità aggiuntive che possono essere 
aggiunte sul proprio cms ed anche in questo caso l’offerta è limitata 
all’essenziale per la versione free di https://it.wordpress.com/install-plugins/ 
mentre è veramente estesa su https://it.wordpress.org/plugins/ 
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Le funzionalità innestabili sono tra le più varie e spaziano dalle statistiche alle 
procedure di ottimizzazione per i motori di ricerca, dalle questioni di sicurezza e 
backup alla possibilità di mettere in evidenza moduli di contatto oppure 
migliorare la presentazione grafica di post ed immagini. 






... e per le APP? 

Per la progettazione delle app è gioco-forza acquisire conoscenze di 
programmazione, od almeno rapportarsi con chi ha conoscenza di coding 
attraverso un servizio online come MockFlow che può servirci come palestra per 
entrare nei meccanismi di progettazione delle app attraverso meccanismi di 
progettazione visuale e brainstorming; inoltre si può approfittare dell'opportunità 
delle Progressive Web Apps e quindi, di nuovo, dei linguaggi del Web per la 
fruizione del Web ma attraverso un'interfaccia che richiama in tutto e per tutto la 
una modalità app. 

MockFlow 

https://www.mockflow.com è un interessante ambiente di sviluppo visuale che 
predispone alla logica di progettazione delle interfacce app. È un ambiente 
complesso ma ordinato che anche nel suo piano free offre degli strumenti 
decisamente utili suddivisi nelle sezioni... 

Wireframe 


L’interfaccia per cominciare a disegnare un wireframe ma anche dotarlo di 
grafica. Con la sua possibilità poi di esportazione del progetto in modalità 
html(5) lo rende di fatto uno strumento di protodpazione. 
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Annotate 

Un sistema per produrre annotazioni capaci di spiegare con etichette (commenti) 
testuali la funzione di ogni singolo componente progettato. 
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Design Collab 

Una piattaforma per condividere le fasi di sviluppo con un ipotetico team i cui 
singoli componenti possono esprimere pareri e fornire commenti utili al fine di 
approdare a scelte collettive condivise. 
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Sitemap 


Lo strumento per organizzare al meglio l’Architettura dell’Informazione della 
propria interfaccia-app e disegnare di conseguenza quello che MockFlow 
definisce ! UI flows e che in questo testo sono stati definiti workflow. 
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Style Guide 

Le linee guida grafiche del progetto inerenti le scelte di palette di colori, font, 
icone, bottoni, grafici ed eventuali altri elementi (grafici) aggiuntivi ed utili alla 
realizzazione dell’interfaccia-app. 

Progressive Web App 

Le PWA o Progressive Web App è quell'opportunità messa a disposizione dei 
navigatori del nostro sito Web da smartphone di accedere ed usufruire del 
medesimo attraverso un'icona ed interfaccia in tutto e per tutto come fosse 
un'app vera e propria; con il vantaggio di avere contenuti indicizzabili dai motori 
di ricerca, velocità di caricamento, fruizione offline, massima usabilità ed 
ovviamente, interoperabilità tecnologica cross-device senza necessità di doppio 
sviluppo per sistemi Android e iOS. 












Processo di sviluppo 


Il processo di sviluppo di una Web App prevede: 

1. la necessità di avere un certificato https; 

2. nel caso di utilizzo di cms avvalersi di appositi plugin : 

3. creare un file Service Worker sw.js per definire quali file mettere in cahce per una fruizione offline; 

4. creare un file Manifest.json che risulterà utile per 

• titolare l'app 

• assegnare un'icona 

• definire layout ed area display dell'app sullo schermo dello smartphone 

• la pagina di partenza del sito web come prima schermata dell'app. 
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Procedure di controllo 

Creare una Web App significa creare un complesso e delicato sistema interattivo 
che necessita sicuramente di attenzioni e controlli fra cui: 

• puntuali controlli manuali per verificare la sua corretta reperibilità, modalità di rappresentazione sui 
social e corretto funzionamento cross-device; 

• approfittare della specifica sezione audits tramite lo stmmento lighthouse (ispeziona elemento con il 
click destro) del browser Chrome; 

• testare con appositi validatori come WebHint . 





Audits 



Identify and fix common problems that affect your site's performance,accessibility,and user experience. 
more 
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Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) le tue scelte 
progettuali definitive circa l’ipotesi progettuale del tuo prototipo. 



Ispirarsi al Material Design per Tusabilità 
deir interfaccia 

Il Material Design di Google 

Acquisite le conoscenze e gli strumenti per sviluppare mockup e prototipi , torna 
prepotentemente alla ribalta la questione su come procedere nella maniera più 
efficace sotto il profilo della funzionalità dell’interfaccia a vantaggio di qualsiasi 
utente e device, in maniera comunicativamente efficace e quindi adottando scelte 
grafiche utili in un’ottica di relazioni internazionali, che poi resta l’opportunità 
più potente introdotta dalla rivoluzione telematica. 

Per tutto questo può venirci in aiuto la proposta di filosofia di Design ideata da 
Google e nota come Material Design ed in particolare le sue linee guida 
https://material.io/design/guidelines-overview/ 

Google e tutti gli altri big del digitale cercano sempre di imporci protocolli e 
standard da rispettare in maniera tale da trasformarci in sussiegosi soldatini al 
loro servizio (dimenticandosi che offrono potenti servizi che possono essere 
pragmaticamente utilizzati al nostro servizio) ma sarebbe da sciocchi non 
prendere in considerazione una serie di consigli ed ipotesi di sviluppo di 
interfacce digitali da parte di chi, da quasi un quarto di secolo, si domanda 
quotidianamente come comunicare efficacemente con miriadi di target diversi e 
su device sempre in evoluzione. Una guida che opportunamente è stata 
recentemente aggiornata prendendo in considerazione anche l' Audio . 





Usabilità alla Google 

Google struttura nelle sue linee guida il principio dell’usabilità in maniera 
bizzarra: lo spalma opportunamente in tutta la guida (essendo l’usabilità il 
prerequisito del buon funzionamento di ogni componente della comunicazione 
digitale) ma crea anche un’apposita sezione Usabilità dove all’interno ci innesta 
la tematica viceversa più ampia e prioritaria dell ’ accessibilità e quella della 
bidirezionalità ovvero l’esigenza di rappresentare correttamente l’informazione 
per quelle lingue orientate da destra verso sinistra. 

In questo paragrafo, viceversa, vedremo quali sono i consigli più interessanti 
delle Material Guidelines orientate ad una ottimale fruizione di un’interfaccia 
digitale (giustamente Google non distingue fra Web ed App...) secondo una mia 
personale analisi critica ed un’esposizione sintetica in lingua italiana (le linee 
guida sono molte complesse ed offerte solo in lingua inglese essendo 
costantemente aggiornate). 

Ma prima di addentrarci su alcuni consigli relativi alle opportunità di 
navigazione di un’interfaccia digitale che rappresenta l’occasione più importante 
per rendere un’interfaccia veramente usabile soffermiamoci su alcuni principi- 
base della filosofia Material Design in termini di usabilità... 

Filosofia touch first 

Pensiamo allo stesso nome Material scelto per queste linee guida: Big G , 
essendo molto interessato ad ottimizzare l’interazione con i dispositivi mobili 
(smartphone ed affini) , vuole promuovere un’idea di design che riesca a 
trasmettere la materialità di ciò che appare a schermo al fine di indurre in 
maniera più convinta ed appagante il gesto del touch sull’icona di turno 
apparentemente tridimensionale e che sembra dire: “toccami toccami “ e questa 
è sicuramente un’ottima impostazione di base molto cali to action. 

Semplicità e sintesi 

Testi e funzioni ridotti al minimo indispensabile nell’ottica di non aggredire e 
confondere l’utente finale, bensì proporgli pagine di atterraggio, meccanismi di 
funzionamento e percorsi più semplici possibili e percepiti anche come più user- 
friendly. 

Chiarezza e massima comprensione 

Tutto deve essere chiaro e comprensibile, l’utente finale NON deve fare nessuna 



fatica a comprendere dove si trova e cosa ha di fronte, altrimenti si corre il 
rischio di perdere l’utente stesso. 

Icone e Colori 

Sì, capisco che sia difficile accostare soprattutto il concetto di colore al concetto 
di usabilità ma l’utilizzo di icone semplici e comunicative e livelli cromatici che 
ben distinguono informazioni e funzioni sono anch’essi funzionali ad 
accompagnare l’utente verso un’esperienza lineare e logica sempre a livello di 
comprensione dell’informazione e delle funzioni a cui si trova di fronte. 



Percorsi e navigazioni 

Bisogna pensare ad organizzare le voci di menù e l’architettura 
dell’informazione più in generale della nostra interfaccia ipotizzando i diversi 
percorsi che un utente finale potrebbe intraprendere per arrivare ad 
un’informazione (od obiettivo-conversione). 

Ad esempio per trovare una canzone posso affidarmi al motore di ricerca interno 
così come indagare sui branimusicli recentemente ascoltati oppure, in maniera 
più sistematica, partire dalle collezioni generali di partenza, per poi scendere 
nelle sotto-categorie come per esempio gli album. 

Menù e chiare opportunità di navigazione 



Il menù cosiddetto hamburger ovvero rappresentato dai famosi tre trattini o 














puntini allineati in verticale è un’ottima e nota opportunità, accolta in maniera 
consapevole da tutta 1‘utenza finale come strumento di navigazione: lo stesso 
utente finale però non è detto che voglia fare lo sforzo di digitare sopra ed è per 
questa ragione che bisogna valutare bene le eventuali voci di menù 
immediatamente visibili così come gli eventuali tab che vengono messi in 
evidenza nella Homepage o da altra ! pagina di atterraggio perché a 
loro è delegata la capacità di comunicare e spiegare all’utente finale dove si 
trova, salvo poi approfondire la navigazione con gli strumenti di navigazione 
interni (menù ad hamburger compreso). 
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Chi cerca trova 

La funzione di ricerca interna è così importante - soprattutto per siti web 
complessi - ai fini di una corretta fruizione di un’interfaccia che, dove non si può 
contare su risorse tecniche interne sufficienti, può essere presa in seria 
considerazione la possibilità di utilizzare una delle varie possibilità offerte dai 
motori di ricerca - tra i quali lo stesso Google c ori https.V/cse.google. it/cse/ - per 
integrare un proprio motore di ricerca interno o custom search engine grazie ad 
un supporto tecnologico esterno. 





























Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) le tue scelte 
progettuali definitive circa i meccanismi di navigazione implementati nel tuo 
prototipo. 



Ispirarsi al Material Design per ^efficacia 
comunicativa 

Google è un grande comunicatore e sicuramente ci offre degli spunti molto 
preziosi in tema di opportunità comunicative anche in merito all’ampio 
panorama di scelte grafiche che abbiamo a disposizione. 

Leggibilità 

È importante realizzare contrasti che consentano al lettore finale di usufruire di 
una buona leggibilità dell’interfaccia nel suo complesso ed in tutte le le sue 
componenti agendo sull’opacità del testo in evidenza e su uno sfondo cromatico 
che consenta un contrasto efficace su qualsiasi schermo e in qualsiasi condizione 
di illuminazione. 



Scelte tipografiche 

In genere viene consigliato un ! font senza grazie maggiormente comprensibile 
a schermo, ma i i font offerti da Google e liberamente utilizzabili sono vari ed 
ognuno in grado di sintonizzarsi ad un certo mood comunicativo: ad esempio per 
esprimere stati d’animo o testimonianze , si può fare riferimento a font con forte 
personalità come gli handwriting. 
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Il vuoto utile 


Fra i tanti non-detti di Google (ma che emerge in maniera evidente in tutti i suoi 
esempi applicativi) vi è l’ampio utilizzo del cosiddetto spazio bianco ovvero di 
ampi spazi lasciati in bianco (vuoti) - detto in gergo spazio bianco ma può essere 
benissimo dello spazio vuoto caratterizzato da altre tonalità cromatica - utilissimi 
per mettere in evidenza degli elementi grafici, tipografici o comunque 
significativamente comunicativi. 

Movimento = Attenzione ? 

Google propone spesso soluzioni che innescano movimenti come occasioni per 
attrarre l’attenzione su determinate aree informative o funzionalità. 



(attenzione vuol dire anche spesso chiamare all'azione ovvero spingere 
all'interazione con l'ultimo elemento oggetto di animazione...) 



l'Immagine è tutto ? 


Se di AUDIO non si parla , il testo deve essere ridotto all’essenziale (ma sarà poi 
vero?) e rispettare precise regole all’insegna della comprensibilità e della 
semplicità e le animazioni attirano l’attenzione, che dire delle immagini? 
L’IMMAGINE è tutto secondo Google e sia essa una illustrazione o una 
fotografia (assegna ad entrambe medesimo valore funzionale-comunicativo) Big 
G è prodigo di utili consigli quali... 

Informativa e non decorativa 

L’immagine deve piacere ed essere gradevole, ma non per questo esteticamente 
fine a sé stessa, ma al contrario sempre portatrice d’informazione utile e 
complementare al testo ai fini della comprensione della comunicazione nel suo 
complesso che vogliamo trasmettere. 



Learn from anywhere 













Non solo informativa, ma dotata di focus informativo 

L’immagine non solo deve essere informativa ma avere un focus informativo: 
una porzione di sé particolarmente significativa che, in caso di 
ridimensionamento in senso ! responsive, possa essere riprodotta in maniera 
utile: dunque una porzione di forma cerchio o quadrato della medesima in cui sia 
contenuto l’elemento maggiormente espressivo e che possa quindi così essere 
rappresentativa su device di tipo diverso una volta opportunamente ritagliata- 
ridimensionata. 






Con capacità di storytelling 

L’immagine deve saper raccontare ovvero deve poter rappresentare una storia o 
far parte di di un racconto perché solo così si può riuscire a colpire l’attenzione e 
l’immaginazione del nostro lettore. 
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Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer) le tue scelte 
progettuali definitive circa le immagini ed altri eventuali oggetti multimediali 
(audio e video) implementati nel tuo prototipo. 



Ispirarsi al Material Design per un approccio cross- 
cultural e cross-device 

Stai progettando un’interfaccia digitale per esseri umani oppure per entità 
artificiali? Sembra una domanda peregrina o provocatoria, ma in realtà sul Web 
le statistiche dimostrano che oltre la metà dei visitatori è costituito da ! bot 
sotto le varie forme di automatismi buoni (quelli utilizzati comunemente dai 
motori di ricerca per intendersi) ma anche ! scraper ed altre maliziose 
creature. In definitiva se siamo naturalmente propensi a progettare per esseri 
umani in un’ottica di User eXperience è certo che la maggior parte dei nostri 
interlocutori sul Web così come nelle altre pieghe del ! cyberspazio è 
costituito da entità artificiali in qualche maniera senzienti ed in ogni caso 
sensibili e reattive alle nostre scelte di design (che dunque dovrebbe definirsi per 
maggiore precisione !(A)UX Design - per chi non l’avesse intuito e non ha 
voglia di andare a leggere il glossario - A sta per Artificial). 

In questo capitolo si cerca sottendere la doppia valenza di una buona 
progettazione digitale capace di accontentare le esigenze di esseri umani con 
diverse esigenze - nel caso specifico con diversa origine linguistica-culturale - e 
quella di dispositivi anche loro caratterizzati da esigenze diverse - nel caso 
specifico con diversa dimensione e risoluzione dello schermo. 

Esigenze Cross Cultural 

Google in realtà le esigenze di internazionalizzazione le raccoglie principalmente 
nel paragrafo Bidirectional e si limita a prendere in considerazione le esigenze di 
quelle culture (poche in realtà) portatrici di una tradizione di lettura e scrittura da 
destra verso sinistra. In realtà esistono molte altre criticità - ed al tempo stesso 
opportunità comunicative - da prendere in considerazione per chi vuole 
valorizzare il proprio design a livello internazionale e fra le tante vale la pena 
segnalare - anche se non affrontate da sua maestà Google... 

• esigenze di design legate a caratteristiche climatiche locali: per esempio nel 
profondo nord dove fa molto freddo bisogna tenere di conto dell’utilizzo di 
guanti e quindi realizzare interfacce dove il touch sia possibile effettuarlo su 
funzioni-aree distinte e non troppo adiacenti dell’interfaccia; 

• fare attenzione alle traslitterazioni fonetiche di parole e brand e controllare 
sempre il significato finale: anche i grandi hanno commesso gaffe in 



passato come nel caso bite thè wax tadpole della Coca Cola : 

simboli e segni possono avere valenze del tutto diverse a seconda delle 
diverse culture (così come i colori peraltro) per cui è decisamente 
importante non fare gaffe culturali: per esempio McDonald ‘s dopo attenta 
riflessione ha deciso di escludere le ossa dal suo set di icone universali per 
rappresentare la sostanza-calcio per non urtare la sensibilità delle persone di 
cultura musulmana di alcune regioni che considerano i cani come esseri 
repellenti ed impuri; 

vi possono essere poi motivi di sicurezza, legali o politici per cui 
determinati servizi sono disabilitati - ed essendo app e siti Web dei nodi 
ipertestuali è un aspetto ovviamente fondante per le proprie sorti 
comunicative: per esempio Facebook e Google hanno problemi di 
operatività in Cina ed allora perché far finta che non esistano motori di 
ricerca come Bing-Baidu-Yandex-Naver oppure social come WeChat-Vk che 
a livello internazionale e soprattutto in alcune regioni specifiche sono la 
scelta prioritaria per l’utenza finale? 

sempre a livello relazionale molte culture hanno i nomi strutturati in 
maniera molto complessa ed allora predisporre moduli di contatto che 
prevedono tre campi (e non i nostri soliti due per nome e cognome) 
sicuramente può trasmettere una sensazione di accettazione e 
consapevolezza in termini di comunicazione internazionale. 
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A proposito, io volutamente ho privilegiato il termine cross-cultural ma è 
importante prendere consapevolezza di altri due termini comunemente utilizzati 
che sono internazionalizzazione (da intendersi come tutte quelle iniziative ed 
accorgimenti utili per comunicare a livello internazionale) e localizzazione (da 
intendersi come tutte quelle iniziative ed accorgimenti utili per adattare una 
comunicazione ad una specifica e locale tipologia linguistica e culturale). 

Per esempio dotare un sito web di versioni linguistiche quanto più numerose 
significare internazionalizzare, mentre sostituire i broccoli con i peperoni verdi 
nel cartone animato Inside Out per trasmettere la sensazione del disgusto ai 
giapponesi vuol dire localizzare. 









Visione RTL 


RTL significa da destra verso sinistra (in inglese) mentre LTR, come avrete 
intuito, da sinistra verso destra: non è solo una impostazione linguistica di lettura 
e scrittura di alcune culture come quella araba o quella ebraica ma si riflette, 
ovviamente, in uno schema mentale di percezione ed utilizzo dell’interfaccia per 
cui - quanto meno all’interno di un’esperienza vissuta all’interno del proprio 
bagaglio culturale di provenienza - si è abituati a porre attenzione a destra dove 
vi è /’ inizio. Provate a vedere in successione le visioni diverse prima LTR e poi 
RTL di https://maktoob.yahoo.com e vi renderete conto di come tutto lo schema 
informativo viene ribaltato specularmente - menù/immagini/loghi - grazie 
all’implementazione dell’attributo rtl nel codice sorgente. 
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Ben Stokes: England all-rounder has ’suffered enough 
punishment', says Michael Vaughan 

Former England captain Michael Vaughan says Ben Stokes has "suffered enough 
punishment" and has backed thè all-rounder's return to thè England squad. Stokes 
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Eccezioni 


Solo alcuni elementi continuano ad essere comunque scritti in LTR come i 
numeri e testo non tradotto. 


DTIJlp 


Phone Number 

( 212 ) 665-8945 


Per gestire correttamente ciò che non deve essere tradotto neanche da 
automatismi e ciò che deve mantenere un orientamento opposto a quelle 
dell’ambiente in cui è ospitato è necessario approfittare rispettivamente 
dell’ attributo notransiate così come deH’attributo bidirectional. 







Esigenze Responsive 

I dispositivi che accedono ad un’interfaccia digitale necessitano di interpretare 
layout e contenuti in maniera ottimizzata relativamente al proprio corredo 
tecnologico, dimensioni e ! risoluzione ed il tutto, ovviamente, a vantaggio 
degli utenti che ne usufruiscono: questo è il principio-base del cosiddetto 
Responsive Design. 

Breakpoint e griglie 

Google si limita - a livello di responsive design - alla necessità di individuare 
breakpoint ed adattare di conseguenza griglie di layout. 



In pratica vengono monitorate costantemente le metriche dei device dopodiché 
relativamente al loro orientamento landscape (orizzontale come un paesaggio) 
oppure portrait (verticale come un ritratto) vengono definiti quali sono i punti di 
rottura dei px (pixel) in corrispondenza dei quali viene fornito un layout diverso 
ovvero con una griglia che ha margini esterni, colonne e spazi fra colonne 
adatti come numero e dimensioni al dispositivo che visualizza ed interpreta la 
pagina o schermata dell’interfaccia in uso. In ambito Web questo si ottiene 
grazie alla tecnica CSS nota come media queries . 

Altri accorgimenti 

In realtà, soprattutto in ambito Web possono esserci ulteriori accorgimenti quali: 

• in caso di layout particolarmente semplici è possibile utilizzare misure 
relative come le misure in % che si adattano automaticamente alla larghezza 
dello schermo; 

• utilizzare immagini SVG ovvero di tipo Scalar Vector Graphics che sono in 
grado di aumentare a dismisura le proprie dimensioni senza perdita di 
risoluzione; 

• sempre per le immagini utilizzare la proprietà CSS max-with che consente 






l’ingrandimento delle immagini ma non oltre la loro massima dimensione 
naturale al fine di evitare fenomeni di degradamento della loro 
visualizzazione; 

• controllare il viewport ovvero che l’area visibile sia settata secondo le 
dimensioni del device in uso attraverso il seguente semplice meta tag 

<meta name="viewport" content="width=device-width" /> 



Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) le tue scelte 
progettuali definitive per adattare il tuo prototipo ad esigenze sia cross-device 
che cross-cultural. 



Analytics e valutazioni post-produzione 

Alla fine dei giochi (ni caso della produzione della nostra interfaccia) possiamo 
dire di essere stati dei bravi progettisti? La risposta spetta solo all’utenza finale; 
ma possiamo contribuire a strutturare tecnicamente questa valutazione di terzi 
attraverso strumenti tecnologici e procedure di analisi. Vediamo quali... 

Aspetti quantitativi = Statistiche 

Quale sia l’ambito ed il linguaggio tecnologico di pertinenza della nostra 
interfaccia digitale la prima questione consiste nel cercare di capire quanti sono 
gli utenti che ci visitano periodicamente e per fare questo è opportuno utilizzare 
gli strumenti più sicuri e semplici che possano esistere: in ambito Web è 
sicuramente opportuno implementare statistiche lato server magari attraverso 
software open-source come AWStats . 



Aspetti qualitativi = Analytics 

Quasi sempre si sente la necessità di capire come si sta comportando la nostra 
utenza sul Web dal momento stesso in cui atterra (da dove arriva?) fino 
all’auspicata conversione. 

Che sia ambito Web oppure che siano app o social, sono le Analytics a svelarci 
tutto ciò che potete immaginare del comportamento della vostra utenza. Vediamo 
insieme alcune opportunità tecnologiche molto interessanti. 

Google Analytics 

Google Analytics è la soluzione più celebre al mondo e sicuramente offre visioni 
molto articolate. È in grado di monitorare app e siti Web andando ad evidenziare 
aspetti molto particolareggiati del comportamento dell’utenza finale. Per quanto 
riguarda il Web il procedimento per usufruire dei suoi servizi (similmente alle 
altre Web Analytics) è molto semplice in quanto consiste nel crearsi un account 
ed implementare su tutte le pagine Web da monitorare un apposito (java)script . 

Fra le tantissime visioni utili di Google Analytic,s una spesso disattesa - ma in 
realtà fra le più interessanti - consente di vedere il flusso di utenti che attraversa 
l’interfaccia monitorata ovvero il percorso degli utenti (in % sul totale) lungo 
tutta l’interfaccia fino ad arrivare a conversioni opportunamente indicate (per 
esempio l’acquisto di un prodotto oppure la visione della pagina dei contatti). 


Starting pages Ist Interaction 

4S.7K Mestone, 24K drop-offe 24.6K sessione, 4.72K drop-offe 



Matomo 

Una soluzione particolarmente interessante per le pubbliche amministrazioni, 
essendo una soluzione open-source e permettendo dunque la possibilità di 
installare sul proprio server il software di monitoraggio senza regalare (pensate 
alle esigenze di riservatezza di siti sanitari o militari...) a terze parti report 
dettagliati sulla propria utenza così come succede con le altre Web Analytics che 
funzionano tramite script e trasmissione dati a ! server altrui. 
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Il potente motore di ricerca russo offre quello che forse è lo strumento più 
performante a livello di Analytics sia per app che per siti Web: è fra i pochissimi 
ad offrire la visione di ! mappe di calore ma soprattutto fra le tante 
caratteristiche innovative vi è quella che consente di ricostruire attraverso video 
denominati session replay il comportamento dell’utenza finale dalla pagina di 
atterraggio alla conclusione della visita o all’ottenimento di un’eventuale 
conversione opportunamente configurata. Strumento innovativo che offre visioni 
all’avanguardia ed utili pur mantenendo una semplicità d’interfaccia invidiabile. 



Ambito Social 

Le Analytics esistono anche per i social: Twitter le chiama proprio Analytics 
mentre Facebook Insights . In entrambi i casi le analytics per i social vanno 
soppesate con cura perché le metriche offerte sono molto illusorie: inutile gioire 
perché decine di migliaia di account hanno visto un nostro annuncio se 
pochissimi poi ci hanno interagito così come prima di festeggiare per la visione 
da parte di tantissime persone di un nostro video bisogna prima verificare che la 
gran parte delle persone non lo abbia abbandonato dopo una manciata di 
secondi! 
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Testi di Usabilità 


Un approccio molto serio per valutare come viene usufruita la nostra interfaccia 
è quella di coinvolgere una parte dell’utenza finale ad eseguire task (compiti) 
con obiettivi ben precisi - “cerca di trovare tale informazione” - e farsi 
resocontare - magari attraverso modulistica precompilata - in quanti passaggi e 
con quale tipo di difficoltà è stato raggiunto il risultato. 

Puoi trovare ispirazione dal modulo pre-impostato da it designers Italia 
https://designers.italia.it/kit/usability-test/ 




Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) come pensi di 
valutare tecnicamente (e con quali procedure) le interazioni sul tuo prototipo dal 
momento in cui sarà utilizzato dal tuo target di riferimento. 



Strutturare i contenuti digitali per una corretta 
conservazione e condivisione online 


Se realizzare un sito Web significa costruire una struttura allora bisogna avere 
anche la capacità di ragionare in termini sovra-strutturali per ambire 
all'utopoistico obiettivo di conservare il proprio lavoro a lungo termine (evitiamo 
di ragionare in termini di eternità, please ) ed al tempo stesso accontentare le 
esigenze di utenza umana od artificiale che attualmente, ma anche nel futuro, 
può presentare delle peculiarità di cui tenere di conto. Vediamo come... 

motori di Ricerca ed indicizzatori 
vari 

In termini di (A)UX-Design è importante strtturare un contenuto e l'interfaccia 
che lo ospita in maniera ottimizzata rispetto a tutti quei bot che in quanlche 
maniera hanno l'esigenza di intepretarla e catalogarla razionalmente anche grazie 
ad algroritmi, procedure di machine learning ed altre opportunità offerte dalla 
sempre più diffusa intelligenza artificiale. 

A tal fine è necessario seguire i seguenti accorgimenti da ritenersi indispensabili 
e senza addentrarsi nelle mille sfumature del cosiddetto Search Engine 
Optimizazion (SEP) : 

• nominare in maniera significativa ogni componenente ed elemento strutturale del sito Web, in 
ordine di importanza dominio, sottodominio, cartelle, nomi di file, nomi di immagini, tag di tipo h; 

• curare gli elementi come i meta tag e description che concorrono alla rappresentazione del 
contenuto indicizzato; 

• sia a livello di rappresentazione più ricca che di corretta indicizzazione applicare dove possibili i 
vocabolari di schematizzazione del protocollo https://schema.org . 
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La suite libera https://it.libreoffice.org è un ottimo software per produrre 
documenti ben formati che possono essere facilmente esportati in PDF oppure in 
epub come per questo stesso testo didattico tramite il plugin writer2xhtml. 
L'epub è un formato standard e quindi correttamente intepretabile dalla maggior 
parte degli ereader ed in ogni caso facilmente utilizzabile per essere convertito 
in formati proprietari che alcuni ereader esigono. 

LibreOffice parla correntemente i linguaggi del Web quindi non ha difficoltà, ad 
esempio di acquisire anche con un semplice copia-ed-incolla dei contenuti pre¬ 
formattati sul Web per poi inserirli nel proprio processo produttivo che può 
includere - previa opportuna configurazione - un'esportazione nel formato 
standard per ebook noto come ePub (e nella sua forma innovativa epub3 capace 
di includere, al pari del Web, componenti multimediali ed interattivi). 










^ LibreOffice Writer 


it 


lun 16:51 

biowatching-toscana.odt - LibreOffice Writer 

le Modifica Visualizza Inserisci Formato Stili Tabella Form Strumenti Finestra Aiuto 



Peraltro la produzione di un ebook partendo da un documento ben formato su 
Libre Office esige ulteriori passaggi per essere sicuri di arrivare ad un risultato 
mediamente usufruibile e nello specifico: 

• controllare la corretta visione dell'ebook tramite il software Calibre e - grazie al medesimo - avviare 
controlli interni sulla correttezza formale del documento prodotto; 

• attuare ulteriori controlli ed apportare eventuali modifiche manuali anche grazie al software Sigil; 

• prima di distribuire il prodotto finale simulare la sua visione a reader evoluti come Readium capaci di 
interpretare le versioni multimediali-interattivi del formato epub3 e sopratutto avere l'approvazione 
del validatore epubchek. 


In ogni caso preservare i meta-dati 

Soprattutto quando si interagisce con piattaforme atte alla conservazione, 
interpretazione e condivisione di contenuti digitali come motori di ricerca, data¬ 
base, eccetera è assolutamente importante assicurarsi che i nostri file conservino 
i cosiddetti meta-dati capaci di trasportare nel tempo informazioni utili su come 
è stata prodotta l'informazione digitale stessa ed alcune informazioni strategiche 
per poterla descrivere e rappresentare efficacemente. 
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Licenze 

Uno dei dati più interessante che possiamo includere nei nostri meta-dati è 
quello relativo alle licenza di distribuzione con cui vogliamo proteggere ma 
anche far condividere i nostri file prodotti. È una scelta importante che può 
caratterizzare anche tutta la pubblicazione che stiamo realizzando rispetto alla 
quale può venirci in aiuto lo strumento del copyright tradizionale oppure le CC 
Creative Commons: queste ultime possono essere utilizzate con piena validità 
giuridica per proteggere o viceversa diffondere i contenuti della propria 
interfaccia o la propria interfaccia nella sua integrità scegliendo fra le seguenti 
opzioni a disposizione su https://creativecommons.org 

• permettere o meno lo sfruttamento commerciale dell’opera 

• permettere o meno la possibilità di modificare l’opera 

• in ogni caso attribuire correttamente l’opera al suo autore citandone 
correttamente il titolo e la licenza di distribuzione assegnatagli 

Una scelta molto diffusa per i materiali divulgativi è quella ad esempio della 
licenza 










Allow adaptations of your work to be shared? 

© 

Yes IO! No C Yes, as long as others share alike 

Allow commercial uses of your work? 

© 

O Yes O No 


© 

Selected License 

Attribution-NonCommercial-NoDerivatives 4.0 International 



Attribution-NonCommercial-NoDerivatives che oltre all’obbligatoria 
attribuzione si permette a chiunque di distribuire l’opera ma senza poterla 
modificare e specularci commercialmente... 

Preservazione a lungo termine 

Formati standard 

La scelta di formati open-source e standard ci permette di realizzare del 
materiale digitale il più adatto possibile per una sua conservazione lungo termine 
e questo perché: 

• fruibile multi-piattaforma; 

• liberamente accessibile e condivisibile; 

• pubblicato e non proprietario; 

• caratterizzato da un codice liberamente disponibile ed accessibile; 

• supportato da documentazione tecnica accessibile e sottoposto al vaglio di 
comunità di sviluppatori. 

Per questa ragione i formati da privilegiare sono quelli FOSS ovvero Free Open 
Source Software (come ad esempio .odt .ods .odp .png. .jpg .mp3 .mp4 ). 


Backup 







Sopratutto per mettere in facile comunicazione il nostro smartphone con il nostro 
desktop computer così come per dotarsi di alcuni accorgimenti per la 
duplicazione e la conservazione dei dati onCloud siamo abiutati ad utilizzare app 
di backup come DropBox ma, ovviamente, le procedure per una conservazione a 
lungo termine anche solo per quanto riguarda le procedure di backup hanno 
bisogno anche di una riflessione ccurata su quanto si sta facendo, sulle 
condizioni di servizio ai quali stiamo ottemperando, sulla proprietà dei servizi a 
cui affidiamo i dati e, non utlimo, un approccio razionale al problema che 
preveda in ogni caso un sistema ridondante e periodico di duplicazione dei dati 
in maniera alternata sia su risorse Icloud che in locale in maniera tale che un 
accidente in locale possa essere rimediato attingendo dalle risorse cloud e 
viceversa. 

Per i possessori di lettori epub3 di seguito un video esplicativo su una tipica 
offerta professionale di backup che include - fra le altre cose - un servizio di 
protezione da Imalware con possibile ripristino dei dati corrispondenti a date 
pregresse relative a condizione dei dati sicuramente integri. 



Verifica 

Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) come pensi di 
strutturare e salvaguardare la tua tesi di laurea di prossima preparazione ai fini di 
una sua corretta fruizione da parte di qualsiasi dispositivo e di una sua 
conservazione a lungo termine. 





Glossario delle Iparole chiave Abracadabra 

!analytics 

Le Analytics sono sistemi informatici di tracciamento che possono ricostruire nei 
minimi dettagli il comportamento dell’utenza finale che sta utilizzando un app 
oppure un sito Web 

!(A)UX Design 

immodestamente sono stato fra i primi (ma forse anche il primo) ad utilizzare 
questa terminologia che significa la capacità di progettare interfacce digitali al 
fine di accontentare più possibile le esigenze di entità artificiali come hot, 
assistenti vocali eccetera. 

! bot 

Robot deriva da una parola di origine ceca che significa “lavoro pesante” e 
sottintende all’utilizzo di macchinari più o meno intelligenti che svolgono lavori 
pesanti al nostro posto, bot sono l’equivalente in ambito informatico-telematico 
anche se la loro caratteristica maggiore non è tanto quella di svolgere lavori 
‘pesanti’ ma in maniera incessante e senza soluzione di continuità nel tempo. 

!cloud 

Sulla nuvola ovvero un po' come un tempo ci si affidava agli dei che stavano 
sull'Olimpo in Cielo ora ci affidiamo ad un nuovo tipo di divinità - molto più 
prosaica - che fra le capacità (per noi umani incomprensibili) ha quella di 
metterci sempre a disposizione dati e servizi grazie ad una connessione Internet- 
like. 

!cross-mediale 

cross-mediale o cross-media sottintende ad un tipo di esperienza comunicativa 
digitale che coinvolge in simultanea oppure in maniera sequenziale dispositivi 
diversi per grandezza, risoluzione o corredo tecnologico 

! cyberspazio 

il web ed internet, ma anche qualsiasi spazio digitale che ipoteticamente può 
essere messo in connessione con altri sistemi e spazi digitali: ecco cos’è il 
cyberspazio 

!debugger 



i bug sono gli scarafaggi ovvero gli errori ed un debugger è un umano o una 
procedura anche automatizzata alla ricerca di scarafaggi, pardon,errori 

!fact-checking 

attività di verifica svolta a livello individuale ma più spesso collettivamente per 
verificare la veridicità di alcune affermazioni comunicate a mezzo-stampa 

! font 

insieme di caratteri tipografici (glifi) caratterizzati e accomunati da un medesimo 
stile grafico 

Iframework 

piattaforme che a livello sovrastrutturale rendono ottimale e comodo l’utilizzo di 
determinati linguaggi e librerie informatiche 

! hosting 

la possibilità di essere ospitati (host= ospite) su un server usufruendo di alcuni 
servizi resi a disposizione 

! logo 

un grafo che rappresenta un’identità aziendale, collettiva od istituzionale: 
tipicamente rappresentato da un’icona-simbolo e da un nome o delle lettere può 
essere peraltro limitato al solo disegno o al solo brand (nome-sigla) tipizzato 
opportunamente 

Smalware 

tipologia di codice eseguibile pensato per produrre, di solito all'insaputa di chi ne 
è infettato, procedure di spionaggio o danneggiamento dati 

! mappe di calore 

le mappe di calore sono rappresentazioni grafiche di aree di schermo utilizzate 
dall’utenza finale dove, classicamente, le aree più utilizzate tendono al rosso¬ 
viola e quelle meno utilizzate al verde-blu 

! motori di ricerca 

un motore di ricerca è una complessa struttura tecnologica che ha le seguenti 
componenti tecnologiche autonome: interfaccia grafica di interrogazione, spider- 
bot che raccoglie le informazioni (sul Internet), data-base dove viene raccolta 
l’informazione, algoritmo che presenta le risposte alle interrogazioni 



indicizzando in maniera ottimizzata l’informazione contenuta nel data-base e 
quindi ordinandola efficacemente sulla pagina di risposta 

!Open Source 

Software il cui codice sorgente è liberamente accessibile al fine di ottimizzare le 
pratiche di libero accesso (anche per motivi di sicurezza) e libera condivisione 
della conoscenza (informatica) 

Spagina di atterraggio 

si intende per pagina di atterraggio qualsiasi pagina che può usufruire di una 
nuova visita da parte di un utente da qualsiasi sorgente di provenienza: può 
essere una visita diretta, oppure provenire da social o motori di ricerca o ad altro 
tipo di referrai ovvero pagina da cui è collegata o può generare comunque una 
visita 

•parole chiave Abracadabra 

una Iparola chiave Abracadabra è un tag specifico per identificare un’entità in 
maniera univoca ed utile all’interno della filiera della comunicazione digitale ed 
in particolare se utilizzata sui motori di ricerca capace di far accedere ad un 
tesoro informativo particolarmente significativo 

!repository 

archivi dove sono depositate, raccolte ed opportunamente indicizzate e 
catalogate risorse utili quali ad esempio opere d’arte digitali oppure software di 
vario tipo 

! responsive 

la capacità di un media (di solito un’immagine ma può anche essere un testo o 
un video) di potersi adattare alle diverse caratteristiche in termini di dimensioni, 
risoluzioni o corredo tecnologico di un dispositivo digitale 

! risoluzione 

vi sono diverse tipologie di risoluzioni e densità che possono caratterizzare la 
resa a schermo (più o meno di qualità) ma l’interpretazione più diffusa è quella 
della quantità di pixel per cui può essere suddiviso lo schermo, ad esempio 
800x600 

!screen-reader 

i lettori di schermo sono software che si interfacciano al normale funzionamento 
di un desktop computer o di uno smartphone ma trasformano tutta 



l’informazione (testuale) che riescono a comprendere in output vocale o braille 
ovvero lo speciale alfabeto tattile pensato per le persone non vedenti 

! scraper 

gli scraper sono i bot che senza avvisare o chiedere il permesso ad alcuno 
raccolgono informazioni su piattaforme-dati altrui per poi poterli riutilizzare a 
proprio vantaggio di solito col fine ultimo di rivendere software od informazioni 
a costo zero 

! scripting 

linguaggio di programmazione 

! server 

il server serve ovvero similmente ai bot è sempre lì pronto a rispondere a 
chiunque (semplice utente denominato client ) sia abilitato a ricevere i suoi 
servigi: ad esempio Apache è un popolarissimo server Web open-source che ci 
permette di usufruire di gran parte delle pagine web che visitiamo tutti i giorni 

[sistema operativo 

un (insieme di) software che fa funzionare un computer secondo una filosofia di 
sviluppo informatico condivisa da una comunità o dettata da un’azienda 
informatica (esempi Linux, Windows, Mac OsX) 

! sotto-dominio 

i domini web si scrivono da destra verso sinistra iniziando con un suffisso 
istituzionalmente definito per proseguire con un dominio di fantasia ed eventuali 
sotto-domini sempre scelti come nome a proprio piacimento (sempre se 
disponibili) ad esempio: sottodominio.dominio.net 

! spamming 

attività comunicativa spesso compulsiva atta a promuovere merci e servizi a 
pagamento 

! tag 

i tag sono quei marcatori - ad esempio nel linguaggio html identificabili dai 
segni di apertura e chiusura parentesi angolare <> - che determinano 
l’assegnazione di particolare entità semantica al quale può essere associata, 
anche tramite altri linguaggi, valore strutturale, di layout oppure di funzionalità 



!UI 

Come mi è un po’ un mantra per i linguaggi appunto di tipo markup-Zanguage 
coi la U che sta per User è utilizzata per diversi acronimi inerenti il rapporto fra 
utenza finale ed intefaccia ed in questo caso specifico User Interface. 

! UX 

User eXperience ovvero l’esperienza utente che si può avere su un’interfaccia 
digitale con più o meno soddisfazione. 



